一篇文章带你快速了解Sass
一,什么是sass
SASS是一种CSS的开发工具,提供了许多便利的写法,例如变量、 嵌套、混合、继承和其它实用的功能,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
二,预处理
一旦开始对Sass进行修补,它将获取经过预处理的Sass文件,并将其另存为可在您的网站中使用的普通CSS文件。
最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后,你就可以用 sass
命令将 Sass 编译为 CSS 了。 首先你需要告诉 Sass 从哪个文件开始构建,以及将生成的 CSS 输出到哪里。 例如,在命令行中执行 sass input.scss output.css
命令, 将会把 Sass 文件 input.scss
编译输出为 output.css
。
你还可以利用 --watch
参数来监视单个文件或目录。 --watch
参数告诉 Sass 监听源文件的变化, 并在每次保存 Sass 文件时重新编译为 CSS。如果你只是想监视 (而不是手动构建)input.scss
文件,你只需在 sass 命令后面添加 --watch
参数即可,如下:
<span style="color:#31333a"><code>sass --watch input.scss output.css
</code></span>
可以使用文件夹路径作为输入和输出, 并使用冒号分隔它们,来监听文件并输出到目录。例如:
<span style="color:#31333a"><code>sass --watch app/sass:public/stylesheets
</code></span>
Sass 将会监听 app/sass
目录下所有文件的变动,并 编译 CSS 到 public/stylesheets
目录下。
三,基本用法
前言: 在能够使用Sass之前,您需要在项目中安装它(必须!!!)。
安装方法可移步官方文档 :https://sass-china.com/install/
3.1 变量
SASS允许使用变量,所有变量以$符号开头。
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
例子中,我们将做一些简单的数学运算来计算aside
和article
的宽度。
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
我们创建了一个非常简单的流体网格,基于960px。Sass中的操作让我们可以轻松地获取像素值并将其转换为百分比。
3.2 计算功能
SASS允许在代码中使用算式:
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.3 嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
div h1 {
color : red;
}
可以写成:
div {
hi {
color:red;
}
}
属性也可以嵌套,比如border-color属性,可以写成:
p {
border: {
color: red;
}
}
注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
3.4 注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
四、代码的重用
4.1 继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令:
.class2 {
@extend .class1;
font-size:120%;
}
扩展与继承:
/* 这段css将会被编译,因为message、success、error、warning中用到了%message-shared */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
/* 这段将不会被编译,因为没有被继承使用过 */
%equal-heights {
display: flex;
flex-wrap: wrap;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
上面 每个类都将获得与%message-shared
相同的CSS属性。这有助于避免在HTML元素上编写多个类名。
4.2 Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
div {
@include left;
}
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的时候,可以像下面这样调用:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
4.4 插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}
配套的还有@else命令:
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
5.2 循环语句
SASS支持for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
也支持while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
5.3 自定义函数
SASS允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}#sidebar {
width: double(5px);
}
上一篇: 怎样下传一个csv文件更新数据库
下一篇: 数组转链表