Sass 入门指南
CSS
不是一种编程语言,你可以用它开发网页样式,但是没法用它编程。也就是说,CSS
基本上是设计师的工具,不是程序员的工具。再程序员眼里,CSS 是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
Sass
是一种CSS预处理器
。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS
文件。
安装
Sass
是Ruby
语言写的,但是两者的语法没有关系。所以要先安装 Ruby。官网建议安装 2.2.X 版本。
安装好后,找到Ruby
的Command
, 或Terminal
,打开输入 gem install sass
。
查看是否安装成功,输入sass -v
,如果返回一个版本信息,说明安装成功。
维护Sass
的团队会不断的添加新的功能,输入gem update sass
就会更新到最新版。
出现该图表示是最新版本。
需要卸载删除Sass
的话输入gem uninstall sass
就可以了,这里就不截图了。
使用
sass 有两种后缀文件名:一种为sass
,该后缀在书写时不使用大括号和分号;另一种是scss
文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。这里主要讲scss
,因为带括号和分号的写法看着更为舒服,sass
后缀有严格的格式要求,极易报错。
最后引入页面<link>
的还是 CSS 文件,这时候就需要把 scss 编译成 css 文件,我选择的是 PhpStorm/WebStorm 的 File Watcher 功能,如何使用这里就不详细说了。
基本语法
变量
SASS 允许使用变量,所有变量以 $ 开头。
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
在声明变量时,变量值也可以引用其他变量。
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
变量需要镶嵌在字符串之中,就必须需要写在#{}
之中。
$side: left;
.rounded {
border-#{$side}-radius: 5px;
}
Sass
中的中划线和下划线相互兼容,也就是说$highlight-color
和$highlight_color
是一样的。
计算功能
Sass
允许在代码中使用算式:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
Sass
允许在选择器嵌套。比如,下面的CSS
代码:
div h1 {
color : red;
}
可以写成:
div {
h1 {
color: red;
}
}
属性也可以嵌套,比如 border-color 属性,可以写成:
p {
border: {
color: red;
}
}
属性进行嵌套也可以减少很多重复性的工作,这里需要注意border
后必须加上冒号。
在嵌套类似于:hover
的伪类时,要在前加上父选择器标识符&
:
a {
&:hover {
color: #ffb3ff;
}
}
同时父选择器标识符还有另外一种用法,你可以在父选择器标识符之前添加选择器:
#content aside {
color: red;
body.ie & { color: green }
}
/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
注释
有两种注释。一种是标准的CSS
注释/* 注释 */
,该注释会保留到编译后的文件。另一种时单行注释// 注释
,只保留在Sass
源文件中,编译后会被省略。
代码的重用
继承
Sass
允许一个选择器,继承另一个选择器。比如,现有class1
:
.class1 {
border: 1px solid #ddd;
}
class2
要继承class1
,就要使用@extend
命令:
.class2 {
@extend .class1;
font-size:120%;
}
Mixin(混合器)
使用@mixin
命令,定义一个代码块:
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
使用@include
, 调用这个 mixin 定义的代码块。
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
混合器还可以传参数:
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
当@include
调用混合器时,你可以把它当作一个css
函数来传参:
a {
@include link-colors(blue,red,green);
}
//Sass最终生成的是:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
插入文件
@import
命令,用来插入外部文件。
@import "path/filename.scss";
默认变量值
一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值:
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
//编译后
a {
color: red;
}
在有些时候,你通过@import
导入Sass
文件作为默认样式,但是你想不通过覆盖的方法修改这个默认值,这个时候就要时候!default
。它很像css
属性中!important
标签的对立面,不同的是!default
用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
dfdf
大哥,在程序员眼里的在打错了
还有跳出嵌套@at-root,刚好最近在学,在大佬这看到逛下@(捂嘴笑)
膜拜大佬@(捂嘴笑)
其它的都看不懂,就觉得图片阴影有些大φ( ̄∇ ̄o)
好厉害的样子\#(期待)
你个水货@(黑线)
Interesting,you'er being stared at