概念
- sass 中文官网
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。 - 特点
完全兼容 CSS3
在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
通过函数进行颜色值与属性值的运算
提供控制指令 (control directives)等高级功能
自定义输出格式 - 语法
1.嵌套写法,文件名要是.scss
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
2.缩进写法,这是最早的sass写法
#header
color: black;
.navigation
font-size: 12px;
.logo
width: 300px;
4.变量的定义
$符
$width: 5em;
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器
$color:red;
.box {
//这里指.box
&:hover {
background-color: $color;
}
.son {
width: 100px;
height: 100px;
background-color: burlywood;
//这里指 .son
&:hover {
background-color: blueviolet;
}
p {color:$color;
//这里指 p
&:hover {
background-color: blueviolet;
}
}
}
span {color: #000;}
h3 {color: #c6c5c6;}
}
5. 属性嵌套
有些 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;
}
注释有 /**/ // 。 //是不会编译出来
SassScript
- 数据类型
- 数字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-serif
- maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
2.运算
2.1 数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。
除法需注意的地方
- 如果值,或值的一部分,是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
//编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
- 函数
SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用:
p {
color: hsl(0, 100%, 50%);
}
p {
color: #ff0000; }
指令
- @import 导入文件
注意
1.但在以下情况下,@import 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
2. 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
- 文件拓展名是 .css;
- 文件名以 http:// 开头;
- 文件名是 url();
- @import 包含 media queries。
2.@media和在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;
}
}
3.@extend 继承样式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
表示的是.error的样式被.seriousError继承了
混合指令(与JavaScript中的函数相似)
1. 定义
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。
简写
为便于书写,@mixin 可以用 = 表示,而 @include 可以用 + 表示,
//定义
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
2.引用
1.定义之后,在父元素中引用编译
.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; }
2.直接定义后编译(就像是函数的调用一样)
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
//编译后
a {
color: blue;
background-color: red; }
函数指令
定义函数@function name($n){}
调用 name(5)
$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;
}