江西省建设厅政务大厅网站,建网站与建网页的区别,大连仟亿科技,临沂建设公司网站Sass基础知识以及常用知识整理
一、CSS 功能拓展
注意#xff1a;、 、和~的区分
1.1 嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中#xff0c;内层的样式将它外层的选择器作为父选择器#xff0c;例如#xff1a;
#main p {color: #00ff00;width: 97%;…Sass基础知识以及常用知识整理
一、CSS 功能拓展
注意、 、和~的区分
1.1 嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中内层的样式将它外层的选择器作为父选择器例如
#main p {color: #00ff00;width: 97%;.redbox {background-color: #ff0000;color: #000000;}
}编译为
#main p {color: #00ff00;width: 97%; }#main p .redbox {background-color: #ff0000;color: #000000; }嵌套功能避免了重复输入父选择器而且令复杂的 CSS 结构更易于管理
#main {width: 97%;p, div {font-size: 2em;a { font-weight: bold; }}pre { font-size: 3em; }
}编译为
#main {width: 97%; }#main p, #main div {font-size: 2em; }#main p a, #main div a {font-weight: bold; }#main pre {font-size: 3em; }1.2 父选择器
在嵌套 CSS 规则时有时也需要直接使用嵌套外层的父选择器例如当给某个元素设定 hover 样式时或者当 body 元素有某个 classname 时可以用 代表嵌套规则外层的父选择器。
a {font-weight: bold;text-decoration: none;:hover { text-decoration: underline; }body.firefox { font-weight: normal; }
}编译为
a {font-weight: bold;text-decoration: none; }a:hover {text-decoration: underline; }body.firefox a {font-weight: normal; }编译后的 CSS 文件中 将被替换成嵌套外层的父选择器如果含有多层嵌套最外层的父选择器会一层一层向下传递
#main {color: black;a {font-weight: bold;:hover { color: red; }}
}编译为
#main {color: black; }#main a {font-weight: bold; }#main a:hover {color: red; }必须作为选择器的第一个字符其后可以跟随后缀生成复合的选择器例如
#main {color: black;-sidebar { border: 1px solid; }
}编译为
#main {color: black; }#main-sidebar {border: 1px solid; }当父选择器含有不合适的后缀时Sass 将会报错。
1.3 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性同时也为了避免了重复输入Sass 允许将属性嵌套在命名空间中使用:例如
.funky {font: {family: fantasy;size: 30em;weight: bold;}
}编译为
.funky {font-family: fantasy;font-size: 30em;font-weight: bold; }命名空间也可以包含自己的属性值例如
.funky {font: 20px/24px {family: fantasy;weight: bold;}
}编译为
.funky {font: 20px/24px;font-family: fantasy;font-weight: bold; }1.4 占位符选择器 %foo
Sass 额外提供了一种特殊类型的选择器占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似只是 # 或 . 替换成了 %。必须通过 extend 指令调用。
// 占位符选择器 %
%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}
.message {extend %message-shared;
}.message {border: 1px solid #ccc;padding: 10px;color: #333;
}当占位符选择器单独使用时未通过 extend 调用不会编译到 CSS 文件中。
二、注释 /* */ 与 //
Sass 支持标准的 CSS 多行注释 /* */以及单行注释 //前者会 被完整输出到编译后的 CSS 文件中而后者则不会例如
/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body { color: black; }// These comments are only one line long each.
// They wont appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }编译为
/* This comment is* several lines long.* since it uses the CSS comment syntax,* it will appear in the CSS output. */
body {color: black; }a {color: green; }将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中通常用于添加版权信息。
插值语句 (interpolation) 也可写进多行注释中输出变量值
$version: 1.2.3;
/* This CSS is generated by My Snazzy Framework version #{$version}. */编译为
/* This CSS is generated by My Snazzy Framework version 1.2.3. */2.1 变量 $
SassScript 最普遍的用法就是变量变量以美元符号开头赋值方法与 CSS 属性的写法一样
$width: 5em;直接使用即调用变量
#main {width: $width;
}变量支持块级作用域嵌套规则内定义的变量只能在嵌套规则内使用局部变量不在嵌套规则内定义的变量则可在任何地方使用全局变量。将局部变量转换为全局变量可以添加 !global声明
#main {$width: 5em !global;width: $width;
}#sidebar {width: $width;
}编译为
#main {width: 5em;
}#sidebar {width: 5em;
}2.2 数据类型
SassScript 支持 6 种主要的数据类型
数字1, 2, 13, 10px字符串有引号字符串与无引号字符串foo, bar, baz颜色blue, #04a3f9, rgba(255,0,0,0.5)布尔型true, false空值null数组 (list)用空格或逗号作分隔符1.5em 1em 0 2em, Helvetica, Arial, sans-serifmaps, 相当于 JavaScript 的 object(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值比如 Unicode 字符集或 !important 声明。然而Sass 不会特殊对待这些属性值一律视为无引号字符串。
2.2.1 字符串
SassScript 支持 CSS 的两种字符串类型有引号字符串 (quoted strings)如 Lucida Grande http://sass-lang.com与无引号字符串 (unquoted strings)如 sans-serif bold在编译 CSS 文件时不会改变其类型。只有一种情况例外使用 #{} (interpolation) 时有引号字符串将被编译为无引号字符串这样便于在 mixin 中引用选择器名
mixin firefox-message($selector) {body.firefox #{$selector}:before {content: Hi, Firefox users!;}
}
include firefox-message(.header);编译为
body.firefox .header:before {content: Hi, Firefox users!; }2.2.2 数组
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。事实上独立的值也被视为数组 —— 只包含一个值的数组。
数组本身没有太多功能但 Sass list functions 赋予了数组更多新功能nth 函数可以直接访问数组中的某一项join 函数可以将多个数组连接在一起append 函数可以在数组中添加新值而 each 指令能够遍历数组中的每一项。
数组中可以包含子数组比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个数组的数组。如果内外两层数组使用相同的分隔方式需要用圆括号包裹内层所以也可以写成 (1px 2px) (5px 6px)。变化是之前的 1px 2px, 5px 6px 使用逗号分割了两个子数组 (comma-separated)而 (1px 2px) (5px 6px) 则使用空格分割(space-separated)。
当数组被编译为 CSS 时Sass 不会添加任何圆括号CSS 中没有这种写法所以 (1px 2px) (5px 6px) 与 1px 2px, 5px 6px 在编译后的 CSS 文件中是完全一样的但是它们在 Sass 文件中却有不同的意义前者是包含两个数组的数组而后者是包含四个值的数组。
用 () 表示不包含任何值的空数组在 Sass 3.3 版之后也视为空的 map。空数组不可以直接编译成 CSS比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值编译时将被清除比如 1px 2px () 3px 或 1px 2px null 3px。
基于逗号分隔的数组允许保留结尾的逗号这样做的意义是强调数组的结构关系尤其是需要声明只包含单个值的数组时。例如 (1,) 表示只包含 1 的数组而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。
2.3.3 Maps
Maps可视为键值对的集合键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象。包括任意的sassscript表达式 arbitrary SassScript expressions 和Lists一样Maps主要为sassscript函数服务如 map-get函数用于查找键值map-merge函数用于map和新加的键值融合each命令可添加样式到一个map中的每个键值对。 Maps可用于任何Lists可用的地方在List函数中 Map会被自动转换为List 如 (key1: value1, key2: value2)会被List函数转换为 key1 value1, key2 value2 反之则不能。(网友Soledad提供)
2.3 运算
所有数据类型均支持相等运算 或 !此外每种数据类型也有其各自支持的运算方式。
2.3.1 数字运算
SassScript 支持数字的加减乘除、取整等运算 (, -, *, /, %)如果必要会在不同单位间转换值。
p {width: 1in 8pt;
}编译为
p {width: 1.111in; }关系运算 , , , 也可用于数字运算相等运算 , ! 可用于所有数据类型。
2.3.1.1 除法运算 / / 在 CSS 中通常起到分隔数字的用途SassScript 作为 CSS 语言的拓展当然也支持这个功能同时也赋予了 / 除法运算的功能。也就是说如果 / 在 SassScript 中把两个数字分隔编译后的 CSS 文件中也是同样的作用。
以下三种情况 / 将被视为除法运算符号
如果值或值的一部分是变量或者函数的返回值如果值被圆括号包裹如果值是算数表达式的一部分
p {font: 10px/8px; // Plain CSS, no division$width: 1000px;width: $width/2; // Uses a variable, does divisionwidth: round(1.5)/2; // Uses a function, does divisionheight: (500px/2); // Uses parentheses, does divisionmargin-left: 5px 8px/2px; // Uses , does division
}编译为
p {font: 10px/8px;width: 500px;width: 1;height: 250px;margin-left: 9px;
}如果需要使用变量同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中只需要用 #{} 插值语句将变量包裹。
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}编译为
p {font: 12px/30px; }2.3.2 颜色值运算
颜色值的运算是分段计算进行的也就是分别计算红色绿色以及蓝色的值
p {color: #010203 #040506;
}计算 01 04 05 02 05 07 03 06 09然后编译为
p {color: #050709; }使用 color functions 比计算颜色值更方便一些。
数字与颜色值之间也可以进行算数运算同样也是分段计算的比如
p {color: #010203 * 2;
}计算 01 * 2 02 02 * 2 04 03 * 2 06然后编译为
p {color: #020406; }需要注意的是如果颜色值包含 alpha channelrgba 或 hsla 两种颜色值必须拥有相等的 alpha 值才能进行运算因为算术运算不会作用于 alpha 值。
p {color: rgba(255, 0, 0, 0.75) rgba(0, 255, 0, 0.75);
}编译为
p {color: rgba(255, 255, 0, 0.75); }颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {color: opacify($translucent-red, 0.3);background-color: transparentize($translucent-red, 0.25);
}编译为
p {color: rgba(255, 0, 0, 0.8);background-color: rgba(255, 0, 0, 0.25); }IE 滤镜要求所有的颜色值包含 alpha 层而且格式必须固定 #AABBCCDD使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {filter: progid:DXImageTransform.Microsoft.gradient(enabledfalse, startColorstr#{ie-hex-str($green)}, endColorstr#{ie-hex-str($translucent-red)});
}编译为
div {filter: progid:DXImageTransform.Microsoft.gradient(enabledfalse, startColorstr#FF00FF00, endColorstr#80FF0000);
}2.3.3 字符串运算 可用于连接字符串
p {cursor: e -resize;
}编译为
p {cursor: e-resize; }注意如果有引号字符串位于 左侧连接无引号字符串运算结果是有引号的相反无引号字符串位于 左侧连接有引号字符串运算结果则没有引号。
p:before {content: Foo Bar;font-family: sans- serif;
}编译为
p:before {content: Foo Bar;font-family: sans-serif; }运算表达式与其他值连用时用空格做连接符
p {margin: 3px 4px auto;
}编译为
p {margin: 7px auto; }在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {content: I ate #{5 10} pies!;
}编译为
p:before {content: I ate 15 pies!; }空的值被视作插入了空字符串
$value: null;
p:before {content: I ate #{$value} pies!;
}编译为
p:before {content: I ate pies!; }2.3.4 布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
2.3.5 数组运算
数组不支持任何运算方式只能使用 list functions 控制。比如map-get()、map-merge()
2.4 圆括号
圆括号可以用来影响运算的顺序
p {width: 1em (2em * 3);
}编译为
p {width: 7em; }2.5 函数
SassScript 定义了多种函数有些甚至可以通过普通的 CSS 语句调用
p {color: hsl(0, 100%, 50%); // 色相,饱和度,亮度
}编译为
p {color: #ff0000; }2.5.1 关键词参数
Sass 函数允许使用关键词参数 (keyword arguments)上面的例子也可以写成
p {color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}虽然不够简明但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口以及容易调用的参数。关键词参数可以打乱顺序使用如果使用默认值也可以省缺另外参数名被视为变量名下划线、短横线可以互换使用。
通过 Sass::Script::Functions 查看完整的 Sass 函数列表参数名以及如何自定义函数。
2.6 插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}编译为
p.foo {border-color: blue; }#{} 插值语句也可以在属性值中插入 SassScript大多数情况下这样可能还不如使用变量方便但是使用 #{} 可以避免 Sass 运行运算表达式直接编译 CSS。
p {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}编译为
p {font: 12px/30px; }2.7 变量定义 !default
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值此时如果变量已经被赋值不会再被重新赋值但是如果变量还没有被赋值则会被赋予新的值。
$content: First content;
$content: Second content? !default;
$new_content: First time reference !default;#main {content: $content;new-content: $new_content;
}编译为
#main {content: First content;new-content: First time reference; }变量是 null 空值时将视为未被 !default 赋值。
$content: null;
$content: Non-null content !default;#main {content: $content;
}编译为
#main {content: Non-null content; }2.8 import
import重复加载、use按需导入结合as命名空间性能更好后续版本可能会弃用import
Sass 拓展了 import 的功能允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中另外被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
Sass 在当前地址或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件如果需要设定其他地址可以用 :load_paths 选项或者在命令行中输入 --load-path 命令。
通常import 寻找 Sass 文件并将其导入但在以下情况下import 仅作为普通的 CSS 语句不会导入任何 Sass 文件。
文件拓展名是 .css文件名以 http:// 开头文件名是 url()import 包含 media queries。
如果不在上述情况内文件的拓展名是 .scss 或 .sass则导入成功。没有指定拓展名Sass 将会试着寻找文件名相同拓展名为 .scss 或 .sass 的文件并将其导入。
import foo.scss;或
import foo;都会导入文件 foo.scss但是
import foo.css;
import foo screen;
import http://foo.com/bar;
import url(foo);编译为
import foo.css;
import foo screen;
import http://foo.com/bar;
import url(foo);Sass 允许同时导入多个文件例如同时导入 rounded-corners 与 text-shadow 两个文件
import rounded-corners, text-shadow;导入文件也可以使用 #{ } 插值语句但不是通过变量动态导入 Sass 文件只能作用于 CSS 的 url() 导入方式
$family: unquote(DroidSans);
import url(http://fonts.googleapis.com/css?family\#{$family});编译为
import url(http://fonts.googleapis.com/css?familyDroidSans);2.8.1 分音
如果需要导入 SCSS 或者 Sass 文件但又不希望将其编译为 CSS只需要在文件名前添加下划线这样会告诉 Sass 不要编译这些文件但导入语句中却不需要添加下划线。
例如将文件命名为 _colors.scss便不会编译 _colours.css 文件。
import colors;上面的例子导入的其实是 _colors.scss 文件
注意不可以同时存在添加下划线与未添加下划线的同名文件添加下划线的文件将会被忽略。
2.8.2 嵌套 import
大多数情况下一般在文件的最外层不在嵌套规则内使用 import其实也可以将 import 嵌套进 CSS 样式或者 media 中与平时的用法效果相同只是这样导入的样式只能出现在嵌套的层中。
假设 example.scss 文件包含以下样式
.example {color: red;
}然后导入到 #main 样式内
#main {import example;
}将会被编译为
#main .example {color: red;
}Directives that are only allowed at the base level of a document, like mixin or charset, are not allowed in files that are imported in a nested context. 这一句不理解 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 import。
2.9 use
use 规则加载来自其他 Sass 样式表的 mixin、函数和变量并将来自多个样式表的 CSS 组合在一起。use 加载的样式表称为 “modules”。Sass 还提供了充满有用 功能的内置模块。
test.scss文件
// forward 转发、use 导入; 注意use 不能导入forward转发的样式而且use要放在文件的最前面
use jubu; // 局部导入下划线可以省略也可以用as重命名
use ./myforward; // 默认当前文件名搭配forward 规则加载 Sass 样式表要在使用 use 规则加载样式表时使其混合、函数和变量才可用
use ./myforward as myforward1; // 自定义别名
use myforward1 as myforward2 with ($black: rgb(12, 12, 12)
);// use daoru as *; // 把相关文件样式导入进来 注意要写在最前面
import daoru; // 把相关文件样式导入进来.forward-use1 {include jubu.rounded;padding: jubu.$radius;include myforward.my-jubu_color1;
}
.forward-use2 {include myforward1.my-jubu_color1;
}两个forward文件
// myforward.scss
forward jubu as my-*; // 转发所有// myforward1.scss
forward jubu1 with ($black: rgb(25, 25, 25) !default,$border-radius: 0.1rem !default
);两个jubu导入文件
// _jubu.scss
.jubu1 {color: aliceblue;
}mixin jubu_color1 {color: red;
}$radius: 3px;mixin rounded {border-radius: $radius;
}// _jubu1.scss
.jubu1 {color: aliceblue;
}mixin jubu_color1 {color: red;
}test.scss编译为
.daoru {color: antiquewhite;
}.forward-use1 {border-radius: 3px;padding: 3px;color: red;
}.forward-use2 {color: red;
}.forward-use3 {border-radius: 0.1rem;box-shadow: 0 0.5rem 1rem rgba(12, 12, 12, 0.15);
}2.10 forward
forward 规则加载 Sass 样式表并在使用 use 规则加载样式表时使其混合、函数和变量可用。它使跨多个文件组织 Sass 库成为可能同时允许用户加载单个入口点 文件。
// src/_list.scss
mixin list-reset {margin: 0;padding: 0;list-style: none;
}
// bootstrap.scss
forward src/list;
// styles.scss
use bootstrap;li {include bootstrap.list-reset;
}编译为
li {margin: 0;padding: 0;list-style: none;
}2.10.1 as
// src/_list.scss
mixin reset {margin: 0;padding: 0;list-style: none;
}
// bootstrap.scss
forward src/list as list-*;
// styles.scss
use bootstrap;li {include bootstrap.list-reset;
}2.10.2 hide
// src/_list.scss
$horizontal-list-gap: 2em;mixin list-reset {margin: 0;padding: 0;list-style: none;
}mixin list-horizontal {include list-reset;li {display: inline-block;margin: {left: -2px;right: $horizontal-list-gap;}}
}
// bootstrap.scss
forward src/list hide list-reset, $horizontal-list-gap;2.10.3 with
// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;code {border-radius: $border-radius;box-shadow: $box-shadow;
}
// _opinionated.scss
forward library with ($black: #222 !default,$border-radius: 0.1rem !default
);
// style.scss
use opinionated with ($black: #333);2.11 media
Sass 中 media 指令与 CSS 中用法一样只是增加了一点额外的功能允许其在 CSS 规则中嵌套。如果 media 嵌套在 CSS 规则内编译时media 将被编译到文件的最外层包含嵌套的父选择器。这个功能让 media 用起来更方便不需要重复使用选择器也不会打乱 CSS 的书写流程。
.sidebar {width: 300px;media screen and (orientation: landscape) {width: 500px;}
}编译为
.sidebar {width: 300px; }media screen and (orientation: landscape) {.sidebar {width: 500px; } }media 的 queries 允许互相嵌套使用编译时Sass 自动添加 and
media screen {.sidebar {media (orientation: landscape) {width: 500px;}}
}编译为
media screen and (orientation: landscape) {.sidebar {width: 500px; } }media 甚至可以使用 SassScript比如变量函数以及运算符代替条件的名称或者值
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;media #{$media} and ($feature: $value) {.sidebar {width: 500px;}
}编译为
media screen and (-webkit-min-device-pixel-ratio: 1.5) {.sidebar {width: 500px; } }2.12 extend
在设计网页的时候常常遇到这种情况一个元素使用的样式与另一个元素完全相同但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class一个通用样式一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式一般会这样写
div classerror seriousErrorOh no! Youve been hacked!
/div样式如下
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {border-width: 3px;
}麻烦的是这样做必须时刻记住使用 .seriousError 时需要参考 .error 的样式带来了很多不变智能比如加重维护负担导致 bug或者给 HTML 添加无语意的样式。使用 extend 可以避免上述情况告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {extend .error;border-width: 3px;
}上面代码的意思是将 .error 下的所有样式继承给 .seriousErrorborder-width: 3px; 是单独给 .seriousError 设定特殊样式这样使用 .seriousError 的地方可以不再使用 .error。
其他使用到 .error 的样式也会同样继承给 .seriousError例如另一个样式 .error.intrusion 使用了 hacked.png 做背景div classseriousError intrusion 也同样会使用 hacked.png 背景。
.error.intrusion {background-image: url(/image/hacked.png);
}2.12.1 How it Works
extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式.seriousError刚刚的例子
.error {border: 1px #f00;background-color: #fdd;
}
.error.intrusion {background-image: url(/image/hacked.png);
}
.seriousError {extend .error;border-width: 3px;
}编译为
.error, .seriousError {border: 1px #f00;background-color: #fdd; }.error.intrusion, .seriousError.intrusion {background-image: url(/image/hacked.png); }.seriousError {border-width: 3px; }当合并选择器时extend 会很聪明地避免无谓的重复.seriousError.seriousError 将编译为 .seriousError不能匹配任何元素的选择器比如 #main#footer 也会删除。
2.12.2 延伸复杂的选择器
Class 选择器并不是唯一可以被延伸 (extend) 的Sass 允许延伸任何定义给单个元素的选择器比如 .special.coola:hover 或者 a.user[href^http://] 等例如
.hoverlink {extend a:hover;
}同 class 元素一样a:hover 的样式将继承给 .hoverlink。
.hoverlink {extend a:hover;
}
a:hover {text-decoration: underline;
}编译为
a:hover, .hoverlink {text-decoration: underline; }与上面 .error.intrusion 的例子一样所有 a:hover 的样式将继承给 .hoverlink包括其他使用到 a:hover 的样式例如
.hoverlink {extend a:hover;
}
.comment a.user:hover {font-weight: bold;
}编译为
.comment a.user:hover, .comment .user.hoverlink {font-weight: bold; }2.12.3 多重延伸
同一个选择器可以延伸给多个选择器它所包含的属性将继承给所有被延伸的选择器
.error {border: 1px #f00;background-color: #fdd;
}
.attention {font-size: 3em;background-color: #ff0;
}
.seriousError {extend .error;extend .attention;border-width: 3px;
}编译为
.error, .seriousError {border: 1px #f00;background-color: #fdd; }.attention, .seriousError {font-size: 3em;background-color: #ff0; }.seriousError {border-width: 3px; }每个 .seriousError 将包含 .error 与 .attention 下的所有样式这时后定义的样式享有优先权.seriousError 的背景颜色是 #ff0 而不是 #fdd因为 .attention 在 .error 之后定义。
多重延伸可以使用逗号分隔选择器名比如 extend .error, .attention; 与 extend .error; extend.attention 有相同的效果。
2.12.4 继续延伸
当一个选择器延伸给第二个后可以继续将第二个选择器延伸给第三个例如
.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {extend .error;border-width: 3px;
}
.criticalError {extend .seriousError;position: fixed;top: 10%;bottom: 10%;left: 10%;right: 10%;
}现在每个 .seriousError 选择器将包含 .error 的样式而 .criticalError 不仅包含 .seriousError 的样式也会同时包含 .error 的所有样式上面的代码编译为
.error, .seriousError, .criticalError {border: 1px #f00;background-color: #fdd; }.seriousError, .criticalError {border-width: 3px; }.criticalError {position: fixed;top: 10%;bottom: 10%;left: 10%;right: 10%; }2.12.5 选择器列
暂时不可以将选择器列 (Selector Sequences)比如 .foo .bar 或 .foo .bar延伸给其他元素但是却可以将其他元素延伸给选择器列
#fake-links .link {extend a;
}a {color: blue;:hover {text-decoration: underline;}
}编译为
a, #fake-links .link {color: blue; }a:hover, #fake-links .link:hover {text-decoration: underline; }7.3.5.1. 合并选择器列
有时会遇到复杂的情况比如选择器列中的某个元素需要延伸给另一个选择器列这种情况下两个选择器列需要合并比如
#admin .tabbar a {font-weight: bold;
}
#demo .overview .fakelink {extend a;
}技术上讲能够生成所有匹配条件的结果但是这样生成的样式表太复杂了上面这个简单的例子就可能有 10 种结果。所以Sass 只会编译输出有用的选择器。
当两个列 (sequence) 合并时如果没有包含相同的选择器将生成两个新选择器第一列出现在第二列之前或者第二列出现在第一列之前
#admin .tabbar a {font-weight: bold;
}
#demo .overview .fakelink {extend a;
}编译为
#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {font-weight: bold; }如果两个列 (sequence) 包含了相同的选择器相同部分将会合并在一起其他部分交替输出。在下面的例子里两个列都包含 #admin输出结果中它们合并在了一起
#admin .tabbar a {font-weight: bold;
}
#admin .overview .fakelink {extend a;
}编译为
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {font-weight: bold; }2.12.6 extend-Only 选择器
有时需要定义一套样式并不是给某个元素用而是只通过 extend 指令使用尤其是在制作 Sass 样式库的时候希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则最后会编译出很多用不到的样式也容易与其他样式名冲突所以Sass 引入了“占位符选择器” (placeholder selectors)看起来很像普通的 id 或 class 选择器只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用当它们单独使用时不会被编译到 CSS 文件中。
// This ruleset wont be rendered on its own.
#context a%extreme {color: blue;font-weight: bold;font-size: 2em;
}占位符选择器需要通过延伸指令使用用法与 class 或者 id 选择器一样被延伸后占位符选择器本身不会被编译。
.notice {extend %extreme;
}编译为
#context a.notice {color: blue;font-weight: bold;font-size: 2em; }2.12.7 !optional 声明
如果 extend 失败会收到错误提示比如这样写 a.important {extend .notice}当没有 .notice 选择器时将会报错只有 h1.notice 包含 .notice 时也会报错因为 h1 与 a 冲突会生成新的选择器。
如果要求 extend 不生成新选择器可以通过 !optional 声明达到这个目的例如
a.important {extend .notice !optional;
}2.12.8 在指令中延伸
在指令中使用 extend 时比如在 media 中有一些限制Sass 不可以将 media 层外的 CSS 规则延伸给指令层内的 CSS这样会生成大量的无用代码。也就是说如果在 media 或者其他 CSS 指令中使用 extend必须延伸给相同指令层中的选择器。
下面的例子是可行的
media print {.error {border: 1px #f00;background-color: #fdd;}.seriousError {extend .error;border-width: 3px;}
}但不可以这样
.error {border: 1px #f00;background-color: #fdd;
}media print {.seriousError {// INVALID EXTEND: .error is used outside of the media print directiveextend .error;border-width: 3px;}
}希望有一天浏览器可以原生支持 extend 指令这样就可以在任何指令中使用延伸功能不再受限制了。
2.13 at-root
放弃当前的嵌套层级,让其内部的CSS规则到根部
.parent {...at-root .child { ... }
}.parent { ... }
.child { ... }或者
.parent {...at-root {.child1 { ... }.child2 { ... }}.step-child { ... }
}.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }三、控制指令
SassScript 提供了一些基础的控制指令比如在满足一定条件时引用样式或者设定范围重复输出格式。控制指令是一种高级功能日常编写过程中并不常用到主要与混合指令 (mixin) 配合使用尤其是用在 Compass 等样式库中。
3.1 if
当 if 的表达式返回值不是 false 或者 null 时条件成立输出 {} 内的代码
p {if 1 1 2 { border: 1px solid; }if 5 3 { border: 2px dotted; }if null { border: 3px double; }
}编译为
p {border: 1px solid; }if 声明后面可以跟多个 else if 声明或者一个 else 声明。如果 if 声明失败Sass 将逐条执行 else if 声明如果全部失败最后执行 else 声明例如
$type: monster;
p {if $type ocean {color: blue;} else if $type matador {color: red;} else if $type monster {color: green;} else {color: black;}
}编译为
p {color: green; }3.2 for
for 指令可以在限制的范围内重复输出格式每次按要求变量的值对输出结果做出变动。这个指令包含两种格式for $var from start through end或者 for $var from start to end区别在于 through 与 to 的含义当使用 through 时条件范围包含 start 与 end 的值而使用 to 时条件范围只包含 start 的值不包含 end 的值。另外$var 可以是任何变量比如 $istart 和 end 必须是整数值。
for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}编译为
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }3.3 each
each 指令的格式是 $var in list, $var 可以是任何变量名比如 $length 或者 $name而 list 是一连串的值也就是值列表。
each 将变量 $var 作用于值列表中的每一个项目然后输出结果例如
each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);}
}编译为
.puma-icon {background-image: url(/images/puma.png); }
.sea-slug-icon {background-image: url(/images/sea-slug.png); }
.egret-icon {background-image: url(/images/egret.png); }
.salamander-icon {background-image: url(/images/salamander.png); }3.3.1 多重赋值
each $animal, $color, $cursor in (puma, black, default),(sea-slug, blue, pointer),(egret, white, move) {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);border: 2px solid $color;cursor: $cursor;}
}编译为
.puma-icon {background-image: url(/images/puma.png);border: 2px solid black;cursor: default; }
.sea-slug-icon {background-image: url(/images/sea-slug.png);border: 2px solid blue;cursor: pointer; }
.egret-icon {background-image: url(/images/egret.png);border: 2px solid white;cursor: move; }由于映射被视为成对的列表因此多重赋值也适用于它们。例如
each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {font-size: $size;}
}编译为
h1 {font-size: 2em; }
h2 {font-size: 1.5em; }
h3 {font-size: 1.2em; }3.4 while
while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 for 更复杂的循环只是很少会用到。例如
$i: 6;
while $i 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}
.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }四、混合指令
混合指令Mixin用于定义可重复使用的样式避免了使用无语意的 class比如 .float-left。混合指令可以包含所有的 CSS 规则绝大部分 Sass 规则甚至通过参数功能引入变量输出多样化的样式。
4.1 定义混合指令 mixin
混合指令的用法是在 mixin 后添加名称与样式比如名为 large-text 的混合通过下面的代码定义
mixin large-text {font: {family: Arial;size: 20px;weight: bold;}color: #ff0000;
}混合也需要包含选择器和属性甚至可以用 引用父选择器
mixin clearfix {display: inline-block;:after {content: .;display: block;height: 0;clear: both;visibility: hidden;}* html { height: 1px }
}4.2 引用混合样式 include
使用 include 指令引用混合样式格式是在其后添加混合名称以及需要的参数可选
.page-title {include large-text;padding: 4px;margin-top: 10px;
}编译为
.page-title {font-family: Arial;font-size: 20px;font-weight: bold;color: #ff0000;padding: 4px;margin-top: 10px; }也可以在最外层引用混合样式不会直接定义属性也不可以使用父选择器。
mixin silly-links {a {color: blue;background-color: red;}
}
include silly-links;编译为
a {color: blue;background-color: red; }混合样式中也可以包含其他混合样式比如
mixin compound {include highlighted-background;include header-text;
}
mixin highlighted-background { background-color: #fc0; }
mixin header-text { font-size: 20px; }混合样式中应该只定义后代选择器这样可以安全的导入到文件的任何位置。
4.3 参数
参数用于给混合指令中的样式设定变量并且赋值使用。在定义混合指令的时候按照变量的格式通过逗号分隔将参数写进圆括号里。引用指令时按照参数的顺序再将所赋的值对应写进括号
mixin sexy-border($color, $width) {border: {color: $color;width: $width;style: dashed;}
}
p { include sexy-border(blue, 1in); }编译为
p {border-color: blue;border-width: 1in;border-style: dashed; }混合指令也可以使用给变量赋值的方法给参数设定默认值然后当这个指令被引用的时候如果没有给参数赋值则自动使用默认值
mixin sexy-border($color, $width: 1in) {border: {color: $color;width: $width;style: dashed;}
}
p { include sexy-border(blue); }
h1 { include sexy-border(blue, 2in); }编译为
p {border-color: blue;border-width: 1in;border-style: dashed; }h1 {border-color: blue;border-width: 2in;border-style: dashed; }4.3.1 关键词参数
混合指令也可以使用关键词参数上面的例子也可以写成
p { include sexy-border($color: blue); }
h1 { include sexy-border($color: blue, $width: 2in); }虽然不够简明但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口以及容易调用的参数。关键词参数可以打乱顺序使用如果使用默认值也可以省缺另外参数名被视为变量名下划线、短横线可以互换使用。
4.3.2 参数变量
有时不能确定混合指令需要使用多少个参数比如一个关于 box-shadow 的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时可以使用参数变量 … 声明写在参数的最后方告诉 Sass 将这些参数视为值列表处理
mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}编译为
.shadowed {-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}参数变量也可以用在引用混合指令的时候 (include)与平时用法一样将一串值列表中的值逐条作为参数引用
mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {include colors($values...);
}编译为
.primary {color: #ff0000;background-color: #00ff00;border-color: #0000ff;
}You can use variable arguments to wrap a mixin and add additional styles without changing the argument signature of the mixin. If you do so, even keyword arguments will get passed through to the wrapped mixin. For example: mixin wrapped-stylish-mixin($args...) {font-weight: bold;include stylish-mixin($args...);
}
.stylish {// The $width argument will get passed on to stylish-mixin as a keywordinclude wrapped-stylish-mixin(#00ff00, $width: 100px);
}上面注释内的意思是$width 参数将会传递给 stylish-mixin 作为关键词。
4.4 向混合样式中导入内容
在引用混合样式的时候可以先将一段代码导入到混合指令中然后再输出混合样式额外导入的部分将出现在 content 标志的地方
mixin apply-to-ie6-only {* html {content;}
}
include apply-to-ie6-only {#logo {background-image: url(/logo.gif);}
}编译为
* html #logo {background-image: url(/logo.gif);
}4.4.1 变量范围和内容块 传递给混入的内容块在定义该块的范围内进行评估而不是在混入的范围内。这意味着混入的局部变量不能在传递的样式块中使用变量将解析为全局值 $color: white;
mixin colors($color: blue) {background-color: $color;content;border-color: $color;
}
.colors {include colors { color: $color; }
}编译为
.colors {background-color: blue;color: white;border-color: blue;
}此外这清楚地表明在传递的块中使用的变量和混入与定义块的其他样式有关。例如 #sidebar {$sidebar-width: 300px;width: $sidebar-width;include smartphone {width: $sidebar-width / 3;}
}五、函数指令
Sass 支持自定义函数并能在任何属性值或 Sass script 中使用
$grid-width: 40px;
$gutter-width: 10px;function grid-width($n) {return $n * $grid-width ($n - 1) * $gutter-width;
}#sidebar { width: grid-width(5); }编译为
#sidebar {width: 240px; }与 mixin 相同也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句需要调用 return 输出结果。
自定义的函数也可以使用关键词参数上面的例子还可以这样写
#sidebar { width: grid-width($n: 5); }建议在自定义函数前添加前缀避免命名冲突其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
自定义函数与 mixin 相同都支持 variable arguments
六、Live Sass Compiler的具体使用案例test.scss
import url(daoru); // 普通的 CSS 语句
import daoru.css; // 普通的 CSS 语句
import http://foo.com/bar; // 普通的 CSS 语句
import foo screen; // 普通的 CSS 语句import daoru; // 把相关文件样式导入进来
import jubu; // 局部导入下划线可以省略.main0 {import jubu; // 嵌套导入
}$version: 1.2.3;
/* This CSS is generated by My Snazzy Framework version #{$version}. */
#main {color: black;-sidebar {border: 1px solid;}sidebar2 {border: 2px solid;} .a {color: red;}
}#content {aside {color: red;body.ie {color: green;}}#aside1 {color: blue;body.ie {color: yellow;}}
}
#test { #test1 {// 子选择器color: red;} #test2 {// 相邻兄弟选择器color: blue;}~ #test3 {// 通用兄弟选择器(选择test3后面的所有元素)color: green;}
}.funky {// 属性嵌套 用color: blue;font: {family: fantasy;size: 30em;weight: bold;}
}
.funky2 {font: 20px/24px {family: fantasy;weight: bold;}
}
// .funky3 {
// a: 20px/24px {
// family: fantasy;
// weight: bold;
// }
// }// 占位符选择器 %
%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}
.message {extend %message-shared;
}
/* .message {border: 1px solid #ccc;padding: 10px;color: #333;
} */#main1 {$width: 5em !global;width: $width;
}#sidebar1 {width: $width;
}.p1 {width: 1in 8pt;
}
.p2 {font: 10px/8px; // 10px字体大小8px行高; Plain CSS, no division$width: 1000px;width: $width/2; // Uses a variable, does divisionwidth: round(1.5) / 2; // Uses a function, does divisionheight: (500px/2); // Uses parentheses, does divisionmargin-left: 5px 8px/2px; // Uses , does division
}
#p3 {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height}; // 不做除法
}// .p3 {
// color: #010203 #040506; 报错不支持颜色相加
// }$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {filter: progid:DXImageTransform.Microsoft.gradient(enabledfalse, startColorstr#{ie-hex-str($green)}, endColorstr#{ie-hex-str($translucent-red)});
}.p4 {cursor: e -resize;
}.p4:before {content: Foo Bar; // 以 号左侧为基准font-family: sans- serif;
}.p5 {margin: 3px 4px auto;
}.p5:before {content: I ate #{5 10} pies!;
}$value: null;
.p6:before {content: I ate #{$value} pies!;
}.p7 {width: 1em 2em * 3 - 2em;
}.p8 {width: 1em (2em * 3);
}.p9 {color: hsl(0, 100%, 50%);
}.p10 {$font-size: 12px;$line-height: 30px;font: #{$font-size}/#{$line-height};
}// .foo.bar .baz.bang, .bip.qux {
// $selector: ;
// }$color: black; // 关键词$开头表示变量; less用开头
mixin color1 {color: red;
}
mixin color2($w, $c: green) {// 带参数以$开头并设置默认值color: $c;.d {color: $c;width: $w;}
}.a {color: aliceblue;.b {color: $color;include color1;include color2(100px);}.c {color: blue;include color2(200px, yellow);}.e {include color2($c: #cccccc, $w: 300px); // 关键词参数可以打乱顺序使用}
}mixin box-shadow($shadows...) {// … 声明参数是不定数量的-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}
.shadows {include box-shadow(0px 4px 5px 12px #666, 2px 6px 10px #999); // 2个参数
}
.shadows2 {include box-shadow(0px 4px 5px 12px #666); // 至少1个参数
}mixin colors($text, $background, $border) {color: $text;background-color: $background;border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {include colors($values, $values, $values);
} // 两回事
.primary2 {include colors($values...); // 相当于展开
}mixin stylish-mixin($c, $width) {// $width 是关键词参数color: $c;width: $width;
}
mixin wrapped-stylish-mixin($args...) {font-weight: bold;border: $args; // 因为$width是关键词参数所以不会传递给此属性include stylish-mixin($args...); // 展开参数
}
.stylish {// $width 参数将会传递给 stylish-mixin 作为关键词include wrapped-stylish-mixin(#00ff00, $width: 100px);
}
/* .stylish {font-weight: bold;border: #00ff00;color: #00ff00;width: 100px;
} */mixin f {.g {content;.i {content;}}
}
include f {// 整体替换color: red;.h {color: blue;}
}$color: white;
mixin colors($color: blue) {background-color: $color;content;border-color: $color;
}
.colors {include colors {color: $color;} // color: white;
}mixin smartphone {media (max-width: 500px) {content;}
}
#sidebar {$sidebar-width: 300px;width: $sidebar-width;include smartphone {width: $sidebar-width / 3;}media (max-width: 1500px) {// media 特殊处理width: $sidebar-width;}
}mixin firefox-message($selector) {body.firefox #{$selector}:before {content: Hi, Firefox users!;}
}
include firefox-message(.header);$content: First content;
$content1: null; // null值会被!default覆盖
$content: Second content? !default; // 不采用!default
$content1: Second content1? !default;
$new_content: First time reference !default;#main {content: $content;content1: $content1;new-content: $new_content 12;
}/**import foo.scss;import foo;import foo.css;import foo screen;import http://foo.com/bar;import url(foo);import rounded-corners, text-shadow;$family: unquote(DroidSans);
*/
// import url(http://fonts.googleapis.com/css?family\#{$family});.error {border: 1px #f00;background-color: #fdd;
}
.seriousError {extend .error;border-width: 3px;
}// a:hover {
// text-decoration: underline;
// }
// .hoverlink {
// extend a:hover;
// }// .hoverlink1 {
// extend .a1:hover;
// }
// .comment .a1.user:hover {
// font-weight: bold;
// }.error1 {border: 1px #f00;background-color: #fdd;
}
.attention1 {font-size: 3em;background-color: #ff0;
}
.seriousError1 {extend .error1;extend .attention1;border-width: 3px;
}.error2 {border: 1px #f00;background-color: #fdd;
}
.seriousError2 {extend .error2;border-width: 3px;
}
.criticalError2 {extend .seriousError2;position: fixed;top: 10%;bottom: 10%;left: 10%;right: 10%;
}#fake-links .link {extend a;
}a {color: blue;:hover {text-decoration: underline;}
}#admin .tabbar a {font-weight: bold;
}
#demo .overview .fakelink {extend a;
}#context a1%extreme {// 占位符 %color: blue;font-weight: bold;font-size: 2em;
}.notice {extend %extreme;
}.parentTop {color: hsl(120, 100%, 50%);at-root {.child1 {color: hsl(120, 100%, 50%);}.child2 {color: hsl(120, 100%, 50%);}}.step-child {color: hsl(120, 100%, 50%);}
}media print {.error {border: 1px #f00;background-color: #fdd;}.seriousError {extend .error;border-width: 3px;}
}.p-if {if 1 1 2 {border: 1px solid;}if 5 3 {border: 2px dotted;}if null {border: 3px double;}
}$typeif: monster;
.p1-if {if $typeif ocean {color: blue;} else if $typeif matador {color: red;} else if $typeif monster {color: green;} else {color: black;}
}for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
}each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);}
}each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {.#{$animal}-icon {background-image: url(/images/#{$animal}.png);border: 2px solid $color;cursor: $cursor;}
}each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {font-size: $size;}
}$i: 6;
while $i 0 {.item-#{$i} {width: 2em * $i;}$i: $i - 2;
}$grid-width: 40px;
$gutter-width: 10px;function grid-width($n) {return $n * $grid-width ($n - 1) * $gutter-width;
}#sidebar {width: grid-width(5);
}$colorMap: (light: #fff,dark: #464646,
);
$colorMap2: (light2: #eee,dark2: #747474,
);
function getVar($paramName) {return map-get($colorMap, $paramName);
}
function getVar2($paramName) {$allColoeMap: map-merge($colorMap, $colorMap2);return map-get($allColoeMap, $paramName);
}#fuc {color: getVar(light);
}
#fuc2 {color: getVar2(light2);
}
