Sass
安装Sass
- window下需先安装 Ruby,打开此命令行工具。
- 输入
gem install sass
- 检查安装是否成功
sass -v
- 自动编译:
sass --watch name.scss:output.css
附加:webstrom配置scss模块
-
File→Settings…→Tools→File Watchers。
-
按
+
号,选择SCSS,弹出此页面,在红色箭头处选择 安装Ruby目录下的\bin\scss.bat。确定即可。
入门
语法
-
编码
@charset 'encoding_name'
-
后缀名
.scss
-
变量名建议中划线
-
交互式shell
在命令行中输入 sass -i
进入交互式shell。
变量 $
- 声明变量
$name
- 块级作用域:在选择器嵌套层级的范围内可用。
- 全局变量:不在任何嵌套选择器内定义的变量。
- 定义变量的时候可以后面带上
!global
标志,也为全局变量。
数字运算(+、-、*、/)
Sass数学函数在算术运算期间会保留单位。
列表(list)
nth
函数可以直接方位列表中的某一项。
join
函数可以将多个列表拼接在一起。
append
函数可以将某项添加到列表中。
@each
指令可以将添加样式到列表中的每一项。
Maps
Maps必须始终使用括号括起来,并且必须用逗号分隔。
$Maps: (key1: value1, key2: value2);
map-get
函数用来查找map中的值。map-merge
函数用来添加值到map中的值。@each
指令可以用来为map中的每个键值对添加样式。
父选择器的标识符 &
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;
}
嵌套属性
把属性名从中划线 -
的地方断开,在根属性后边添加一个冒号 :
,紧跟一个{}块,把子属性部分写在这个{}块中。
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
// 编译后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
导入Sass文件 @import
以下情况不会导入任何Sass文件,仅作为普通的Css @import规则语句:
- 如果文件扩展名是
.css
。 - 如果文件名以
http://
开始。 - 如果文件名是
url()
。 - 如果 @import 中包含任何媒体查询。
@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);
// 如果导入文件是css格式,先把css格式改为scss格式
@import scssname.scss;
// 编译后为合并了scssname.scss的css文件
@media
(与css一样,只是添加了一点功能)
- 如果一个
@media
指令出现在css规则中,它将被冒泡到样式表的顶层。并包含规则内所有的选择器。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
// 编译后
.sidebar {
width: 300px;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
- 可以相互嵌套,将会使用and结合。
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
// 编译后
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
默认变量值 !default
它很像css
属性中!important
标签的对立面,不同的是 !default
用于变量,含义是:**如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。 **
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
混入器 @mixin
- 命名以最终视觉样式。
- 解决展示样式的重用。
- 通过
@include
引入
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
@minxin 指定默认参数值
@mixin link-colors($normal: red){
color: $normal;
}
a {
@include link-colors(blue);
}
// 编译后
a {
color: blue;
}
可变参数
用于不确定一个混入或者一个函数使用多少个参数。
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 2px 5px #666);
}
可变参数也可以在 @include
一个混入mixin时使用。
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
// $values可以是list,也可以是map
$values: #ff000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
// 编译后
.primary {
color: #ff000;
background-color: #00ff00;
border-color: #0000ff;
}
传递内容块到混入 @content
样式内容块可以传递到混入包含样式的位置。样式内容块将出现在混入内的任何@content
指令的位置。
@mixin font {
.font1 {
@content;
}
}
@include font {
.fontText {
color: red;
}
}
// 编译后
.font1 .fontText {
color: red;
}
**注意:**当 @content
指令指定多次或在一个循环中指定的时候,样式块将在每次调用中被复制并引用。
变量的作用域和内容块
传递给混入(mixin)的内容块在其被定义的作用域中进行运算,而不是混入(mixin)的作用域。这意味着混入(mixin)的局部变量不能传递给样式块使用,并且变量将解析为全局值:
$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;
}
使用选择器继承来精简CSS @extend
- 用于语义化样式的重用。
.error {
border: 1px red;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 编译后
.error, .seriousError {
border: 1px red;
}
.seriousError {
border-width: 3px;
}
class = 'seriousError' ==> class = 'seriousError error'
多重扩展
- 同一个选择器可以扩展多个选择器。
- 定义在文档后面的样式优先级高于定义在文当前面的样式。
.seriousError {
@extend .error;
@extent .attention;
}
链式扩展
.error {
border: 1px red;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
}
// 编译后
.error, .seriousError, .criticalError {
border: 1px red;
}
.seriousError, .criticalError {
border-width: 3px;
}
.criticalError {
position: fixed;
}
合并选择器序列
- 如果没有包含相同的选择器,将生成两个新选择器:第一列出现在第二列之前,或第二列出现在第一列之前。
- 如果两个列包含里相同的选择器,相同部分将会合并在一起,其他部分交替输出。
#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;
}
@extend
-Only选择器
- 占位符选择器像class和id选择起,只把
#
或.
替换成%
- 占位符选择器本身不会被编译。
#context a%extreme { color: blue; }
.notice { @extend %extreme; }
// 编译后
#context a.notice { color: blue; }
指令中的@extend
在sass中存在一些限制:Sass不可以将 @media
层外的css规则扩展给指令层内的css,意思就是,**如果在 @media
(或其他CSS指令)中使用 @extend
,必须扩展给相同指令层中的选择器。 **
// 这个可行
@media print {
.error {
border: 1px red;
}
.seriousError {
@extend .error;
}
}
// 下面这个报错
.error {
border: 1px red;
}
@media print {
.seriousError {
@extend .error;
}
}
函数指令
函数可以访问任何全局定义的变量,以及接受参数,就像一个混入(mixin)。函数可以包含语句,并且必须调用@return
来设置函数的返回值。
$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; }
@at-root
@at-root
指令导致一个或多个规则被限定输出在文档的根层级上。
.parent {
...
@at-root {
.child{ ... }
}
}
// 编译后
.parent { ... }
.child { ... }
@at-root (without: ...)
只将除了 … 选择器之外的移到指令之外。@at-root (with: ...)
将 … 选择器的移到指令之外。
@debug
错误输出流
@debug 10em + 12em;
@warn
错误出错流
样式表跟踪将与消息一起将被打印出来。
@error
插值 #{}
#{}
插值可以用来在字符串中放置动态值。#{}
靠近它的运算符都将被视为纯css,可避免运算。
p:before { content: 'I ate #{5 + 10} pies!'; }
// 编译后
p:before { content: 'I ate 15 pies!'; }
控制指令
@if
判断
@if
后面可以跟多个 @else if
语句和一个 @else
语句。
$type: moster;
p{
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else {
color: black;
}
}
// 编译后
p { color: green; }
@for
循环
两种形式:
@for $var from <start> through <end>
@for $var from <start> to <end>
注意:
- 当
<start>
比<end>
大的时候,为递减,反之递增。 from...to
的形式从<start>
开始,但不包含<end>
的值;from...through
的形式包含。
@for $i from 1 through 3 {
.item-#($i) {
width: 2em * $i;
}
}
@while
循环(很少用)
@each
遍历
格式: @each $var in <list or map>
@each $animal in puma, sea-slug, egret{
.#{$animal}-icon {
color: red;
}
}
// 编译后
.puma-icon { color: red; }
.sea-slug-icon { color: red; }
.egret-icon { color: red; }
@each
指令也可以使用多个变量
格式: @each $var, $var2, ... in <list>
如果 <list>
是列表(list)中的列表,子列表中的每个元素被分配给各自的变量。
@each $animal, $color, $cursor in (puma, black, default), (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;
}
.egret-icon {
background-image: url("/images/egret.png");
border: 2px solid white;
cursor: move;
}