本文是学习 《scss 中文文档》后,个人觉得平时比较用的上的一些笔记记录,例子就直接引用原文的例子,原文地址:Sass 中文文档 · SCSS中文文档 · 看云
Sass 是一款强化 css 的辅助工具,它在 css 的基础上,增加了 变量、嵌套、混合、导入等高级功能,这些新增功能让 css 更强大、更优雅。
Sass 有两种语法格式,一种是 scss (本文所用格式),这种格式尽在 CSS3 的基础上进行拓展,所有 CSS3 在 scss 中都是通用的,同时加入 sass 的特色功能。这种格式以 .scss 作为拓展名。
另一种语法格式通常简称为 sass,是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。以 .sass 作为拓展名。
目录
4.2 @media、@extend、@at-root、@warn
一、css 功能拓展
1.1 嵌套规则
scss 允许将一套 css 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。嵌套功能可以避免重复输入父选择器。用法示例:
#main {
width: 97%;
p,
div {
font-size: 2em;
a {
font-weight: bold;
}
}
pre {
font-size: 3em;
}
}
上面的css代码将编译为:
#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 父选择器 &
在 1.1 的嵌套中,需要用到嵌套外层的父选择器时,可以用 & 代表嵌套规则外层的父选择器。如果含有多层嵌套,在最外层的父选择器会一层一层的向下传递。例如:
#main {
color: black;
&:hover {
text-decoration: underline;
}
body.firefox & {
font-weight: normal;
}
a {
font-weight: bold;
&:hover {
color: red;
}
}
}
编译为:
#main {
color: black;
}
#main:hover {
text-decoration: underline;
}
body.firefox #main {
font-weight: normal;
}
#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;
}
& 感觉可以理解为外层的嵌套一层一层传递下来的父选择器的简写,有点像指令 v-on 简写为 @ 一样。
1.3 属性嵌套
有些 css 属性遵循相同的命名空间, 例如 font-family, font-size, font-weight
都以 font
作为属性的命名空间。scss 允许将属性嵌套在命名空间中,命名空间也可以包含自己的属性值。例如:
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
// 20px/24px 即为font自己的属性值,如果没有自己的属性值,则直接省略
编译为:
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold;
}
1.4 占位符选择器 % 与 @extend 指令
- @extend 指令用法:如果一个选择器中的样式与另一个选择器样式几乎相同,只有少量的区别,这时可以使用@extend。@extend 指令可以告诉 scss 一个选择器的样式从另一个选择器继承。示例1:
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
编译为:
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
上面示例中,button-report、button-submit 通过 @extend 可以继承 button-basic 里的所有样式。当 button-basic 未通过 @extend 调用时,button-basic也会编译到 css 文件中。
- 占位符选择器 % 用法: 与常用的 id 、calss 选择器写法相似,只是 # 或 . 变成了%。占位符选择器 % 必须通过 @extend 调用,当 % 单独使用时(未被 @extend 调用),不会被编译到 css 文件中。示例2:
%button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend %button-basic;
background-color: red;
}
.button-submit {
@extend %button-basic;
background-color: green;
color: white;
}
编译为:
.button-report, .button-submit { // 注意这里不会编译 button-basic,和示例1中有所区别
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
二、 多行注释 /* */ 与 单行注释 //
scss 支持标准的 css 单行及多行的注释,区别是/* */ 注释的内容会被完整编译到 css 文件中,而 / / 不会。例子:
/*
* 多行注释的内容
* ....
*/
.calssname1 {
color: red;
}
// 单行注释的内容
.classname2 {
color: black;
}
编译后:
/*
* 多行注释的内容
* ....
*/
.calssname1 {
color: red;
}
.classname2 {
color: black;
}
插值语句可以写进多行注释中输出 scss 变量值:
$version: "1.2.3";
/* 输出 version #{$version} */
注:#{ } 为 scss 的插值语句
编译后:
/* 输出 version 1.2.3 */
三、SassScript
在 css 的基础上,scss 提供了一些名为 SassScript 的新功能。SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。
3.1 变量 $、变量定义 !default
变量以美元符号 $ 开头;变量支持块级作用域(局部变量),嵌套规则内定义的变量只能在嵌套规则内使用,也就是说在某个{ } 内定义的局部变量,和i能在该 { } 内使用,这个和js中的局部变量类似;将局部变量转为全局变量可以用 !global 声明。
可以在 scss 变量的结尾添加 !default 声明,如果变量已经被附值,则不会被重新附值,如果变量还没附值,则会被赋值。例如:
$content: "First content";
$new_content: "First time reference" !default;
$content: "Second content?" !default;
$title: null;
$title: "新的标题" !default;
#main {
content: $content;
new-content: $new_content;
}
#main-two {
content: $title;
}
编译后:
#main {
content: "First content"; // 第一次有值,不会被第二次的替换
new-content: "First time reference";
}
#main-two {
content: "新的标题"; // 第一次为null,则会取第二次的值
}
3.2 数据类型
SassScript 支持6中数据类型:
- 数字,如 1,1px
- 字符串,包括有引号、无引号字符串,如 “a”,b
- 颜色,如 red, #000000,rgba(0,0,0,0.2)
- 布尔
- 空值 null
- 数组,用空格或逗号作为分隔符
- maps,相当于 js 中的 object
3.3 运算
加减乘和普通运算没有太大的区别,除法(/)会有些不同,除法符号 / 在 CSS 中通常是分隔数字的作用,有三种情况 / 会被视为除法运算符:
1. 值,或值的一部分,是变量或者函数的返回值;
2. 值被圆括号包裹;
3. 如果值是算数表达式的一部分;
例如:
P {
font: 10px/8px; // 纯CSS,不会进行除法运算
$width: 1000px;
width: $width/2; // 使用变量,会进行运算
width: round(1.5) / 2; // 使用函数, 会进行运算
height: (500px/2); // 使用了圆括号包裹,会进行运算
margin-left: 5px + 8px/2px; // 在算数表达式中,会进行运算
$font-size: 20px;
$line-height: 40px;
font: #{ $font-size }/#{ line-height } // 要使用变量,又要使/不进行运算,可以将变量用#{}包裹
}
编译后:
P {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
font: 20px/40px;
}
其他运算,如颜色、字符串等感觉不是特别常用,就没用做特别的记录,有想了解的,可以跳转原文查看。
3.4 插值语句 #{ }
通过 #{ } 插值语句可以在选择器、属性名、多行注释中使用变量,在属性值中使用可以避免scss运行运算表达式(见除法运算中的例子)。示例:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
/* 使用变量的注释 #{$name} */
编译后:
p.foo {
border-color: blue;
}
/* 使用变量的注释 foo */
四、@-Rule 与指令
4.1 @import
通常,@import 会寻找 scss 文件并将其导入,但在一下情况下,@import 仅作为普通 CSS 语句,不会导入任何 .scss 文件:
- 文件拓展名为 . css
- 文件名以 http:// 开头
- 文件名为 url()
- @import 包含media queries
如果不在上面的四种情况内,则会导入 .scss 拓展名的文件。如果没有指定拓展名,scss 将会寻找拓展名为 .scss 的同名文件,然后将其导入。
@import "foo.scss"; 或 @import "foo";
都会导入 foo.scss 文件
不会导入 .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);
scss 允许同时导入多个文件,例如:
@import "rounded-corners", "text-shadow";
会同时导入 rounded-corners.scss , text-shadow.scss 两个文件
导入文件也可以使用 #{ } ,但不是通过变量动态导入scss文件,只能用于 url( ) 的导入方式,
例如:
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
编译后:
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
4.2 @media、@extend、@at-root、@warn
原文章中这部分内容还包含了@media、@extend、@at-root、@warn这几个指令,有兴趣的可以阅读原文。
五、控制指令
控制指令平时用到的比较少,主要是和混合指令 mixin 配合使用。
5.1 @if
@if 和 js 中 if 的用法类似,当条件满足时,输出相对应的代码。同 js 的 if 一样,@if 后面也可以跟一个 @else 或多个 @else if。例如:
P {
@if 1 + 1 == 2 {
border: 1px solid;
}
@if 5 < 3 {
border: 2px dotted;
}
@if null {
border: 3px double;
}
}
$type: monster;
.name {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译后:
P {
border: 1px solid;
}
.name {
color: green;
}
5.2 @for
@for 指令可以在限制的范围内重复输出格式,可以每次都按要求(变量的值)输出不用的结果。@for 包含的两种格式及其使用中的区别:
- @for $var from <start> through <end>,输出范围包含 <start> 和 <end>
- @for $var from <start> to <end>,输出范围只包含 <start>,不包含 <end>
上面两种格式中,$var 可以是任何变量名,<start> 和 <end> 必须是整数值。例子:
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
@for $j from 1 to 3 {
.info-#{$j} {
height: 1em * $j;
}
}
编译后:
// through 方式含头尾
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
// to 方式含头不含尾
.info-1 {
height: 1em;
}
.info-2 {
height: 2em;
}
5.3 @each
@each 指令的格式是:@each $var in <list>,$var 可以是任何变量名,而<list>是值列表。@each 将变量 $var 作用于列表中的每一项,然后输出结果,例子:
@each $animal in puma, sea-slug {
.#{$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");
}
@each 也可以使用多个变量,如@each $var1, $var2 ...,后面跟的列表中的子列表的每个元素会分配给相应的变量。例子:
@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;
}
六、混合指令 @mixin
@maxin 用于定义可重复使用的样式,避免使用无语义的 classname。混合指令可以包含所有的 css 规则,绝大部分 scss 规则,甚至可以通过参数引入变量,输出多样化的样式。
6.1 定义@mixin
@mixin 用法格式:@mixin 名称 { 样式 }。例子:
6.2 引用混合样式 @include
已定义的@mixin 通过 @include 引用,格式:@include 混合名称。也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器。
例子:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links; // 在最外层引用
编译后:
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
a {
color: blue;
background-color: red;
}
6.3 参数
定义@maxin 时,可以设置参数,可以设置参数默认值,写法和函数类似。例子:
@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;
}
七、其他内容
函数指令@function、输出格式(:nested、:expanded、:compact、:compressed)感觉平时用不大到,有兴趣的可以看原文链接Sass 中文文档 · SCSS中文文档 · 看云