Sass语法及安装

蔚落 2022-09-28 13:04 233阅读 0赞

**sass安装**

**一、ruby安装**

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载 [ruby][]

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

![Center][]

![Image 1][]

**二、sass安装**

安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

![Image 1][]

![Center 1][]

然后直接在命令行中输入

gem install sass

升级sass版本的命令行为

gem update sass

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过 gem source s 命令来配置源，先移除默认的 https://rubygems.org 源，然后添加淘宝的源 https://ruby.taobao.org/ ，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令 gem install sass 了，关于常用gem source命令可参看： [常用的gem source][gem source]

$  gem sources --remove https://rubygems.org/ $  gem sources -a https://ruby.taobao.org/  【如果你系统不支持https，请将淘宝源更换成： gem sources -a http://gems.ruby-china.org 】$  gem sources -l \*\*\* CURRENT SOURCES \*\*\*https://ruby.taobao.org *\# 请确保只有 ruby.taobao.org* $  gem install sass

**sass语法**

**一、导入**

@import

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

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

**二、注释**

/\* \*/

// 这种单行注释不会被转译出来

**三、变量**

sass的变量必须是 $开头，后面 紧跟变量名，而变量值和变量名之间就需要使用冒号( :)分隔开（就像CSS属性设置一样），如果值后面加上 !default则表示默认值。

普通变量： $fontSize: 12px;

定义之后可以在全局范围内使用。

默认变量： $baseLineHeight: 1.5 !default;

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

覆盖变量：

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

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

![Center 2][]

![Image 1][]

**多值变量：**

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

**list**

list数据可通过空格，逗号或小括号分隔多个值，可用 nth($var,$index) 取值。关于list数据操作还有很多其他函数如 length($list) ， join($list1,$list2,\[$separator\]) ， append($list,$value,\[$separator\]) 等，具体可参考 [sass Functions][] （搜索 List Functions 即可

![Image 1][]

![Center 3][]

![Center 4][]

![Image 1][]

**map**

map数据以key和value成对出现，其中value又可以是list。格式为： $map: (key1: value1, key2: value2, key3: value3); 。可通过 map-get($map,$key) 取值。关于map数据还有很多其他函数如 map-merge($map1,$map2) ， map-keys($map) ， map-values($map) 等，具体可参考 [sass Functions][] （搜索 Map Functions 即可）

![Image 1][]

![Center 5][]

![Center 6][]

![Image 1][]

**全局变量**

在变量值后面加上 !global 即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

**目前变量机制**

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

**四、嵌套**

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。

**选择器嵌套**

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中， 可以使用 & 表示父元素选择器

![Image 1][]

![Center 7][]

![Center 8][]

![Image 1][]

**属性嵌套**

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头

//sass style//-------------------------------.fakeshadow \{ border: \{ style: solid; left: \{ width: 4px; color: \#888; \} right: \{ width: 2px; color: \#ccc; \} \}\}//css style//-------------------------------.fakeshadow \{ border-style: solid; border-left-width: 4px; border-left-color: \#888; border-right-width: 2px; border-right-color: \#ccc; \}

**@at-root**

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

**普通跳出嵌套**

**//没有跳出**

.parent-1 \{

color:\#f00;

.child \{

width:100px;

/\*\*\*\*\*\*\*\*\*\*/

.parent-1 \{

color: \#f00;

.parent-1 .child \{

width: 100px;

**//单个选择器跳出**

.parent-2 \{

color:\#f00;

@at-root .child \{

width:200px;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

.parent-2 \{

color: \#f00;

.child \{

width: 200px;

**//多个选择器跳出**

.parent-3 \{

background:\#f00;

@at-root \{

.child1 \{

width:300px;

.child2 \{

width:400px;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

.parent-3 \{

background: \#f00;

.child1 \{

width: 300px;

.child2 \{

width: 400px;

**@at-root (without: ...)和@at-root (with: ...)**

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用 @at-root (without: media)， @at-root (without: support)。这个语法的关键词有四个： all（表示所有）， rule（表示常规css）， media（表示media）， support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

**//跳出父级元素嵌套**

@media print \{

.parent1\{

color:\#f00;

@at-root .child1 \{

width:200px;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

@media print \{

.parent1 \{

color: \#f00;

.child1 \{

width: 200px;

**//跳出media嵌套，父级有效**

@media print \{

.parent2\{

color:\#f00;

@at-root (without: media) \{

.child2 \{

width:200px;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

@media print \{

.parent2 \{

color: \#f00;

.parent2 .child2 \{

width: 200px;

**//跳出media和父级**

@media print \{

.parent3\{

color:\#f00;

@at-root (without: all) \{

.child3 \{

width:200px;

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

@media print \{

.parent3 \{

color: \#f00;

.child3 \{

width: 200px;

![Image 1][]

![Center 9][]

![Center 10][]

![Image 1][]

**五、混合(mixin)**

sass中使用 @mixin 声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的 @mixin 通过 @include 来调用。

**无参数mixin**

//sass style-------------------------------

@mixin center-block \{

margin-left:auto;

margin-right:auto;

.demo\{

@include center-block;

//css style-------------------------------

.demo\{

margin-left:auto;

margin-right:auto;

**有参数mixin**

//声明-------------------------------

@mixin opacity($opacity:50) \{

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

//调用-------------------------------

.opacity\{

@include opacity; //参数使用默认值

.opacity-80\{

@include opacity(80); //传递参数

**多个参数mixin**

调用时可直接传入值，如 @include 传入参数的个数小于 @mixin 定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

//sass style-------------------------------

@mixin horizontal-line($border:1px dashed \#ccc, $padding:10px)\{

border-bottom:$border;

padding-top:$padding;

padding-bottom:$padding;

.imgtext-h li\{

@include horizontal-line(1px solid \#ccc);

.imgtext-h--product li\{

@include horizontal-line($padding:15px);

//css style-------------------------------

.imgtext-h li \{

border-bottom: 1px solid \#cccccc;

padding-top: 10px;

padding-bottom: 10px;

.imgtext-h--product li \{

border-bottom: 1px dashed \#cccccc;

padding-top: 15px;

padding-bottom: 15px;

**多组值参数mixin**

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如 $variables...

//sass style------------------------------- box-shadow可以有多组值，所以在变量参数后面添加...

@mixin box-shadow($shadow...) \{

\-webkit-box-shadow:$shadow;

box-shadow:$shadow;

.box\{

border:1px solid \#ccc;

@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));

//css style-------------------------------

.box\{

border:1px solid \#ccc;

\-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);

box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);

**@content**

@content 在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使 @mixin 接受一整块样式， 接受的样式从@content开始 。

![Center 11][]

![Image 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;

**占位选择器** **%**

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

//sass style-------------------------------

%ir \{

color: transparent;

text-shadow: none;

background-color: transparent;

border: 0;

**%clearfix** \{

@if $lte7 \{

\*zoom: 1;

&:before,

&:after \{

content: "";

display: table;

font: 0/0 a;

&:after \{

clear: both;

\#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;

如上代码，定义了两个占位选择器 %ir 和 %clearfix ，其中 %clearfix 这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

**ps** ：在 @media 中暂时不能 @extend   @media 外的代码片段，以后将会可以。

建议传递参数的用 @mixin ，而非传递参数类的使用下面的继承 %

**七、函数**

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为： [sass fuction][sass Functions] ，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为 lighten($color,$amount) 和 darken($color,$amount) ，它们的第一个参数都是 *颜色值* ，第二个参数都是 *百分比* 。

关于 @mixin ， % ， @function 更多说明可参阅：

*  [sass揭秘之@mixin，%，@function][sass_mixin_function]
 *  [Sass基础——颜色函数][Sass]
 *  [Sass基础——Sass函数][Sass_Sass]

**八、运算**

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意 **运算符前后请留一个空格** ，不然会出错。

**九、** **条件判断及循环**

**@if**可一个条件单独使用，也可以和 **@else**结合多条件使用

//sass style-----------

$type: monster;

p \{

@if $type == ocean \{

color: blue;

\} @else if $type == matador \{

color: red;

\} @else if $type == monster \{

color: green;

\} @else \{

color: black;

**三目判断**

语法为： **if($condition, $if\_true, $if\_false)** 。三个参数分别表示：条件，条件为真的值，条件为假的值。

if(true, 1px, 2px) => 1px

if(false, 1px, 2px) => 2px

**for循环**

for循环有两种形式，分别为： **@for $var from <start> through <end>** 和 **@for $var from <start> to <end>** 。 $i表示变量，start表示起始值，end表示结束值 ，这两个的区别是关键字 through表示包括end这个数 ，而 to则不包括end这个数 。

//sass style------------------------------

@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;

**@each循环**

语法为： **@each $var in <list or map>** 。其中$var 表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

**单个字段list数据循环**

//sass style-----------------------------

**$animal-list:**  puma, sea-slug, egret, salamander;

**@each $animal in $animal-list**  \{

. \#\{$animal\} \-icon \{

//css style----------------------------

.puma-icon \{

.sea-slug-icon \{

.egret-icon \{

.salamander-icon \{

**多个字段list数据循环**

//sass style-----------------------------

**$animal-data** : (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);

**@each $animal, $color, $cursor in $animal-data**  \{

. \#\{$animal\} \-icon \{

border: 2px solid  $color ;

cursor:  $cursor ;

//css style----------------------------

.puma-icon \{

border: 2px solid black;

cursor: default;

.sea-slug-icon \{

border: 2px solid blue;

cursor: pointer;

.egret-icon \{

border: 2px solid white;

cursor: move;

**多个字段map数据循环**

//sass style-----------------------------

$headings : (h1: 2em, h2: 1.5em, h3: 1.2em);

@each $header, $size in $headings  \{

\#\{$header\}  \{

font-size:  $size ;

//css style-----------------------------

h1 \{

font-size: 2em;

h2 \{

font-size: 1.5em;

h3 \{

font-size: 1.2em;

**sass编译**

**命令行编译：**

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassFileDirectory:cssFileDirectory

css文件转成sass/scss文件（在线转换工具css2sass）

sass-convert style.css style.sass

**gui编译**

[http://koala-app.com/index-zh.html][http_koala-app.com_index-zh.html]

[http://www.w3cplus.com/blog/777.html][http_www.w3cplus.com_blog_777.html]

![Center 12][]

![Image 1][]

参考： [http://www.w3cplus.com/sassguide/][http_www.w3cplus.com_sassguide]

[ruby]: http://rubyinstaller.org/downloads
[Center]: /images/20220708/c315f453ca1644af9e6c320d2126fe7e.png
[Image 1]: 
[Center 1]: /images/20220708/340170c482794dc9912cb6a2f89ade48.png
[gem source]: http://foyo99.zhuidaniu.com/blogs/687
[Center 2]: /images/20220708/332865e107374202924a34b105cf0f4f.png
[sass Functions]: http://sass-lang.com/documentation/Sass/Script/Functions.html
[Center 3]: /images/20220708/a723ec12f6f64586a80af7d1f44608f9.png
[Center 4]: /images/20220708/924e33ed0f9247b39e3eebe8bd40da01.png
[Center 5]: /images/20220708/3231cfe6cac0410e9cbf3fde2a826b51.png
[Center 6]: /images/20220708/a3aef9ec75564a08a9aef9c32ca6f17f.png
[Center 7]: /images/20220708/737d92018a534587bd38b1c2cd2ff146.png
[Center 8]: /images/20220708/b497cacf430649799a40ba4a7903d4d4.png
[Center 9]: /images/20220708/9b23144a90a247f9877bb4de5bbb5428.png
[Center 10]: /images/20220708/2860a10ea8564a77884188d2feb78ff1.png
[Center 11]: /images/20220708/2b331815d04c4785a611518f38a1673e.png
[sass_mixin_function]: http://www.w3cplus.com/preprocessor/sass-mixins-function-placeholder.html
[Sass]: http://www.w3cplus.com/preprocessor/sass-color-function.html
[Sass_Sass]: http://www.w3cplus.com/preprocessor/sass-other-function.html
[http_koala-app.com_index-zh.html]: http://koala-app.com/index-zh.html
[http_www.w3cplus.com_blog_777.html]: http://www.w3cplus.com/blog/777.html
[Center 12]: /images/20220708/94511efde8ae4a77a618d86df18b8faf.png
[http_www.w3cplus.com_sassguide]: http://www.w3cplus.com/sassguide/