Sass基础
来源:互联网 发布:java常用的分布式框架 编辑:程序博客网 时间:2024/05/29 13:16
变量Variable
变量是在样式单中重用信息的一种方式。 你可以存储颜色,字体设置 或者其它的你要重用的CSS值。 Sass使用$
标记变量, 这里是一个例子:
1234567
$font-stack: Helvetica, sans-serif;$primary-color: #333;body {font: 100% $font-stack;color: $primary-color;}
当处理Sass时, 它得到变量$font-stack
和$primary-color
的值, 并用它们替换CSS中的变量为正常的CSS的值。 当处理已命名的颜色时这个功能相当强大,可以让CSS保持一致。
1234
body {font: 100% Helvetica, sans-serif;color: #333;}
嵌套Nesting
当写HTML代码时, 你可能注意到它有一个清晰的嵌套和可视化的继承关系(意者按:DOM)。 而CSS缺乏这个功能。
Sass可以让你嵌套你的CSS选择器(selector), 就像HTML的可视化继承关系一样。注意过度的嵌套也可能导致过度设计的CSS。 这会很难维护,通常被认为的差的实践。
考虑到这一点, 这里是一个站点导航的典型的样式:
123456789101112131415
nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {display: block;padding: 6px 12px;text-decoration: none;}}
这里的ul
,li
,a
选择器都嵌套在nav
中。 这是一个极佳的组织CSS的方式, 让CSS变的更可读。 当你产生CSS时你会得到:
123456789101112131415
nav ul {margin: 0;padding: 0;list-style: none;}nav li {display: inline-block;}nav a {display: block;padding: 6px 12px;text-decoration: none;}
分部文件Partial
你可以创建部分的Sass文件,这些文件包含CSS的小的可以插入到其它Sass文件的片段。这又是一个极佳的模版化CSS的方式, 可以更好的维护CSS。一个分部文件的名字以下划线开头比如_partial.scss. 下划线让Sass知道这个文件是一个分部文件,不会为它单独产生一个CSS文件。可以使用@import导入分部文件.
导入Import
CSS有一个导入(import)选项。 它可以让你的CSS文件分割成一些小的更易维护的文件。 唯一的缺点是你需要在CSS使用 @import
, 它会产生另外一个HTTP请求 (?)。 Sass在构建顶层CSS时不会请求新的HTTP request,而是得到你要引入的文件并把它插入到当前文件中。所以你只会得到唯一一个CSS文件.
来看两个文件 _reset.scss
and base.scss
. 我们会导入 _reset.scss
到 base.scss
.
123456789
// _reset.scsshtml,body,ul,ol {margin: 0;padding: 0;}
12345678
/* base.scss */@import 'reset';body {font-size: 100% Helvetica, sans-serif;background-color: #efefef;}
注意在文件base.scss
中你使用的是@import 'reset'
; 当你导入一个文件时你不必包含后缀 .scss
. Sass足够聪明,会正确工作. 当产生CSS文件后,你会得到:
123456789
html, body, ul, ol {margin: 0;padding: 0;}body {background-color: #efefef;font-size: 100% Helvetica, sans-serif;}
Mixins
有些东西在CSS中编写起来相当乏味, 尤其是当许多供应商的前缀 ( vendor prefixes, 指-webkit-XXXX等)存在时。 mixin可以为CSS声明分组, 可以在站点中重用。你甚至可以传递给它一些参数, 这相当灵活. mixin一个很好的应用就是处理浏览器变种的前缀。 请看 border-radius
的例子.
12345678
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;}.box { @include border-radius(10px); }
你可以使用 @mixin
创建mixin, 并赋予一个名字. 这里我们命名这个mixin 为border-radius
. 我们在圆括号里使用变量作为参数, 这样我们可以传入一个我们想要的值。 当你创建了你的mixin, 你可以用@include
使用它作为CSS声明。 @include紧跟着 mixin的名字. 当生成CSS后, 生成的CSS会是这样:
123456
.box {-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;border-radius: 10px;}
扩展/继承Extend/Inheritance
这是Sass最有用的特性之一。使用 @extend
可以让一个selector共享另外一个selector的CSS属性。 它可以让你的Sass遵循DRY原则(Don’t repeat yourself). 下面的例子中我们会建立一个系列消息类如 error, warning 和 success.
1234567891011121314151617181920
.message {border: 1px solid #ccc;padding: 10px;color: #333;}.success {@extend .message;border-color: green;}.error {@extend .message;border-color: red;}.warning {@extend .message;border-color: yellow;}
上面的代码允许你获取.message
的CSS属性并将它们应用到.success
, .error
和 .warning
上. 魔法在生成的CSS上呈现, 它帮助你避免在一个HTML元素上写多个类名。 结果看起来就像:
1234567891011121314151617
.message, .success, .error, .warning {border: 1px solid #cccccc;padding: 10px;color: #333;}.success {border-color: green;}.error {border-color: red;}.warning {border-color: yellow;}
Operator
在CSS中的数学运算很有帮助. Sass可以使用标准的数学运算 +
, -
, *
, /
, and %
. 这个例子我们会计算aside
&article
的宽度.
1234567891011
.container { width: 100%; }article[role="main"] {float: left;width: 600px / 960px * 100%;}aside[role="complimentary"] {float: right;width: 300px / 960px * 100%;}
我们已经创建了一个简单的960px流式表格. Sass运算符可以使用像素值并轻易地把它转为百分比的表示。产生的CSS如下:
12345678910111213
.container {width: 100%;}article[role="main"] {float: left;width: 62.5%;}aside[role="complimentary"] {float: right;width: 31.25%;}
- Sass基础
- sass基础
- sass基础
- Sass基础
- sass基础
- Sass基础
- SASS基础
- Sass基础
- sass基础
- 基础sass
- SASS安装 SASS编译 SASS基础语法
- 【Sass-02】Sass基础语法
- sass之基础用法
- sass基础入门
- css-sass基础语法
- sass基础语法
- Sass语法基础
- sass基础语法
- Unity SVN 管理(二)
- Glide加载时等比例缩放图片至屏幕宽度
- Git学习笔记
- HDU 3709 Balanced Number(数位dp)
- 括号配对
- Sass基础
- 设计模式 ---- 工厂模式
- iOS面试,最全详细梳理!
- Mybatis中dataSource
- 如何用eclipse下对手机APK进行单步调测
- Linux中用户权限与所属组问题
- ajax无刷新聊天室系统
- 顺序表应用5:有序顺序表归并
- linux mysql外网授权链接