移动端开发教程:Sass入门

2018-02-27 10:57:04来源:https://cloud.tencent.com/developer/article/1042825作者:极客头条人点击

分享
1. 引言

CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一种增强CSS编程的扩展语言(CSS4也可以期待),有了像Sass这种预处理语言后,CSS的编程不再局限在枚举属性了,可以有更广阔的舞台。


2. Sass的原理

Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能,让CSS编程变得异常强大。


当然浏览器是不认识Sass语法。开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。


//sass 代码
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
// 通过工具将上面的sass代码可以转成下面的CSS代码↓↓↓
//css 代码
//-------------------------------
body{
font-size:12px;
}
3. Sass的编译环境

Sass代码的编译转换工具可以用sass命令行工具、gulp、开发工具插件、webpack等。


我推荐大家学习阶段直接用开发工具的插件自动生成即可。如果你是在项目阶段使用,那肯定有自动化的流程构建工具比如:gulp、webpack都有对应的插件或者loader,直接对应配置即可。



老马推荐vscode的自动编译Sass文件的插件:
Live Sass Compiler



使用方法: 第一步: 用vscode打开scss文件。 第二步:ctrl+shift+p
(macctrl→command
)输入sass选择入下图选项


4. Sass的两种文件后缀

sass有两种后缀名文件:一种后缀名为sass,语法要求不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的CSS文件格式差不多,使用大括号和分号。


//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}

老马推荐使用scss文件后缀及使用括号和分号的编写方式。


5. Sass中的变量和注释
5.1 定义变量及使用

Sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样)。


$a-color: blue; // 定义变量。
.box {
color: $a-color; // => blue使用变量
}

用vscode插件转换一下试试?


5.2 局部变量和全局变量。

变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加 !global 声明。


//sass style
//-------------------------------
$a-color: blue;// 全局变量
.box {
$a-color: red; // 局部变量,box内部不使用。
color: $a-color; // => red局部变量
}
.child {
color: $a-color; // => blue全局变量
$main-width: 16em !global; // 在局部定义全局的变量。
}
.main {
width: $main-width;// 使用在内部定义的全局变量。
}
/*===============生成的CSS代码===================*/
.box {
color: red;
}
.child {
color: blue;
}
.main {
width: 16em;
}

从以上代码中也可以看到Sass支持CSS的注释/**/之外还支持双斜线的注释: //


5.3 特殊变量

如果变量作为CSS属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。


//sass style
//-------------------------------
$side: top;
.box {
border-#{$side}: 1px solid #09c;
}
//css style
//-------------------------------
.box {
border-top: 1px solid #0098cc;
}
6. 嵌套(Nesting)
6.1 嵌套规则 (Nested Rules)

Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。


//sass style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
//-------------------------------
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
6.2 父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,可以用 & 代表嵌套规则外层的父选择器。


//sass style
//-------------------------------
.box {
border-#{$side}: 1px solid #09c;
&::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}
}
//css style
//-------------------------------
.box {
border-top: 1px solid #09c;
}
.box::before {
content: '';
display: block;
position: absolute;
left: 100px;
top: 5px;
}

& 必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器。


//sass style
//-------------------------------
#main {
color: black;
&-sidebar { border: 1px solid; }
}
//css style
//-------------------------------
#main {
color: black;
}
#main-sidebar {
border: 1px solid;
}
6.3 @at-root

@at-root用来跳出当前选择器嵌套。


//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
7. 运算

Sass支持多种数据类型的变量,比如:


数字,1, 2, 13, 10px
字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
颜色,blue, #04a3f9, rgba(255,0,0,0.5)
布尔型,true, false
空值,null

所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。


7.1 数值运算

Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。


//sass style
//-------------------------------
.box {
height: 17px + 20px; // => 37px 数字加法运算
width: (75rem/16); // => 4.6875rem除法运算
color: #303030*2;// => #606060; 乘法运算(颜色运算)
padding: 20px - 3; // => 17pex数字减法
font-family: sans- + "serif"; // => sans-serif 字符串加法
width: 1em + (2em * 3); // 带括号的运算
}
//css style
//-------------------------------
.box {
height: 37px;
width: 4.6875rem;
color: #606060;
padding: 17px;
font-family: sans-serif;
width: 7em;
}
8. Sass语句

Sass提供了常用的循环、判断分支语句的相关指令,可以让我们按照编程语言一样编写Sass代码。


8.1 if语句

当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码。


//sass style
//-------------------------------
$w: 960px;
$type: monster;
.box {
@if 2*3 > 5 {// 简单if判断语句
color: red;
}
@if $w > 900px {
width: $w;
} @else { // ifelse 语句
width: 900px;
}
@if $type == ocean {// 多个if和else语句
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.box {
color: red;
width: 960px;
color: green;
}

@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。 如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明


8.2 for循环语句

@for 指令可以在限制的范围内重复输出格式。类似for循环。 两种格式:


@for $var from <start> through <end>
:条件范围包含 <start> 与 <end> 的值
@for $var from <start> to <end>
: 围只包含 <start> 的值不包含 <end> 的值
//scss style
//------------for througth循环-------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }
//scss style
//------------forto 循环-------------------
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {width: 2em; }
.item-2 {width: 4em; }
8.3 each循环

@each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者 $name,而 <list> 是一连串的值,也就是值列表。


//sass style
//-------------------------------
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.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");
}

复杂对应each


//sass style
//-------------------------------
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
9. 混合指令 (Mixin Directives)
9.1 不带参数的简单Mixin

混合指令(Mixin)用于定义可重复使用的样式,可以直接把一整段Sass代码替换到某个地方去。


//sass style
//-------------------------------
// 定义mixin reset, 用@mixin开头,后面跟空格和混合块的名字。然后是语句块
@mixin reset {
padding: 0;
margin: 0;
}
html, body, div , input {
@include reset(); // 引用 reset 混合块。用@include指令引用混合块。
}
//css style
//-------------------------------
html, body, div, input {
padding: 0;
margin: 0;
}
9.2 带参数的Mixin

Mixin还可也添加参数,跟函数一样使用。


//sass style
//-------------------------------
@mixin sexy-border($color, $width) {
border: $width solid $color;
}
p { @include sexy-border(blue, 1px); }
//css style
//-------------------------------
p {
border: 1px solid blue;
}
10. 函数指令 (Function Directives)

虽然Mixin功能强大,但是某些场景下还是函数应用更方便,Sass也提供了自定义函数的用法。


//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
// 定义自定义函数 grid-width
@function grid-width($n) {// 接受一个参数$n
@return $n * $grid-width + ($n - 1) * $gutter-width;// 返回值。
}
#sidebar { width: grid-width(5); } // 在属性中调用函数
//css style
//-------------------------------
#sidebar {
width: 240px;
}
11. 继承(扩展)
11.1 基本继承

sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词 @extend,后面紧跟需要继承的选择器。


//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1, .speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
11.2 占位符%

可以定义占位选择器 %。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了 @extend去继承相应的样式,都会解析出来所有的样式。占位选择器以 %标识定义,通过 @extend调用。


//sass style
//-------------------------------
%ir {// 定义占位符。没有选择器名字的一段代码而已。
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1, .ir {
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1 {
width: 300px;
}
12. 导入文件

Sass的导入( @import)Sass文件规则和CSS的有所不同,编译时会将 @import的scss文件合并进来只生成一个CSS文件。 但是如果你在Sass文件中导入css文件如 @import 'reset.css',那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以 @import方式存在。


所有的Sass导入文件都可以忽略后缀名 .scss。一般来说基础的文件命名方法以_开头,如 _mixin.scss。这种文件在导入的时候可以不写下划线,可写成 @import "mixin"。


例如: a.scss 文件


//a.scss
//-------------------------------
body {
background: #eee;
}

main.scss 主文件。


//sass style
//-------------------------------
@import "reset.css";// 导入css文件,不会进行编译。
@import "a"; // 导入a.scss 文件,后缀省略
p{
background: #0982c1;
}
//css style
//-------------------------------
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}


参考列表:


Sass中文网文档
Sass语法快速入门

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台