来自 前端知识 2019-11-28 13:24 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

关于sass的安装及使用教程,Sass用法指南

Sass用法指南

2015/09/06 · CSS · Sass

原稿出处: 吴广磊的博客   

写在前面包车型客车话:乘胜CSS文件进一步大,内容越来越复杂,对其举行很好的护卫将变的很难堪。那时CSS预微机就可以预知帮上海高校忙了,它们往往具备变量、嵌套、世襲等居多CSS不富有的天性。有不菲CSS预微电脑,这里计算Sass的施用方法。

======正文最早======

大家能够通过风度翩翩种恍若css的编制程序语言编写代码,保存为.scss后缀名的文本,然后利用Sass举行拍卖为css文件,而这种.scss文件中得以有变量、嵌套等成效,某些编制程序的意味,Sass简介看这里:Sass;同一时候.scss文件也能够由此Sass管理为压缩的、缩进的等分歧风格的css代码,方便前期的结构。上面是本身的部分就学总括。

豆蔻梢头、情状陈设

1.安装rubby:

  Sass是用ruby写的,要求ruby的运作蒙受,从以下链接下载rubyinstaller进行设置(windows卡塔 尔(英语:State of Qatar):

2.安装Sass

安装到位ruby后,接下去安装Sass。由于本国ruby源现在被墙,通过上边情势张开设置SASS,展开cmd命令行。

(1卡塔尔移除原有的ruby源地址

gem sources –remove 

(2卡塔 尔(阿拉伯语:قطر‎新扩大可用的ruby源地址

gem sources -a https://ruby.taobao.org

(3) 安装Sass

gem install sass

(4卡塔尔sublime扶助scss文件高亮展现

借助package control安装sass插件,之后set syntax为sass即可。

图片 1

(5卡塔 尔(阿拉伯语:قطر‎幸免Sass普通话注释乱码

一连写.scss代码进度中中文注释会有乱码的情况,找到engine.rb文件(日常坐落于Ruby22librubygems2.2.0gemssass-3.4.18libsass目录上边卡塔 尔(阿拉伯语:قطر‎,在颇有的require前面新增如下代码:

Encoding.default_external = Encoding.find(‘utf-8’)

图片 2

于今,Sass遇到布署到位。

二、编译.scss文件为css文件

  总计具体Sass语法格式以前,先说一下怎样编写翻译.scss文件为css文件。

1.切换成.scss文件所在目录

一声令下行下切换成代码文件夹目录(如Z:卡塔尔国,倘若有文件test.scss文件,里面内容如下:(SASS完全扶助css语法卡塔 尔(阿拉伯语:قطر‎

CSS

h1{ font-size:17px; } h2{ font-size:18px; }

1
2
3
4
5
6
h1{
    font-size:17px;    
}
h2{
    font-size:18px;
}

 

2.编译scss文件为css文件

运转命令:sass –style compressed test.scss test.css,就可以生成压缩版的css文件,何况命名称为test.css。几点表达:

(1卡塔 尔(阿拉伯语:قطر‎–style 前边能够有多个参数可选,分别为expanded、nested、compact、compressed,分别选拔差别参数的效果能够友善尝尝体验。

(2卡塔尔test.scss和test.css文件目录能够自定义,比方把Z盘sass目录下的test.scss文件编写翻译为压缩版的公文,并放置在Z盘css目录下,那么命令即:sass –style compressed z:sasstest.scss z:csstest.css

(3卡塔 尔(英语:State of Qatar)开拓进程中,只须要校勘scss文件,然后编译;前端页面只须要引用相应的css文件就能够。

3.侦听文件和文件夹

  若是期望某叁个scss文件只怕相应的文件夹上边文件改革后,自动进行编写翻译,那么能够行使侦屈从令。

(1卡塔 尔(英语:State of Qatar)侦听文件:

sass –watch –style compressed test.scss:test.css

当test.scss文件有修改后,会活动编写翻译为test.css,并且是compressed的。

(2卡塔 尔(阿拉伯语:قطر‎侦听文件夹:

sass –watch –style compressed sass:css

当sass文件夹下.scss文件有改换的时候,会活动编写翻译为与sass中文件同名的css文件。

备注:

(1卡塔尔注意源文件和指标文件之间是冒号,与编译命令中为空格不相同。

(2卡塔尔生成的map文件可以搜寻source map文件的职能。

三、Sass基本用法

上边临Sass基本的用法举办总括,SASS语法与CSS具有相当的高的相同度。

以下演示源代码放在test.scss文件中,编译后生成的css文件放在test.css文件中,侦服从令为:

sass –watch –style expanded sass/test.scss:css/test.css

1.变量:以$开头。

源代码:

Sass

$color1:#aeaeae; .div1{ background-color:$color1; }

1
2
3
4
$color1:#aeaeae;
.div1{
    background-color:$color1;
}

编译后:

CSS

.div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  background-color: #aeaeae;
}
 
/*# sourceMappingURL=test.css.map */

2.变量嵌套在字符串之中:应该以#{}包裹。

源代码:

Sass

$left:left; .div1{ border-#{$left}-width:5px; }

1
2
3
4
$left:left;
.div1{
    border-#{$left}-width:5px;
}

编译后:

CSS

.div1 { border-left-width: 5px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  border-left-width: 5px;
}
 
/*# sourceMappingURL=test.css.map */

3.允许实行测算:

源代码:

Sass

$left:20px; .div1{ margin-left:$left+12px; }

1
2
3
4
$left:20px;
.div1{
    margin-left:$left+12px;
}

编译后:

CSS

.div1 { margin-left: 32px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1 {
  margin-left: 32px;
}
 
/*# sourceMappingURL=test.css.map */

4.同意选拔器嵌套:

源代码:

Sass

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } }

1
2
3
4
5
6
7
8
.div1{
    .span1{
        height: 12px;
    }
    .div2{
        width: 16px;
    }
}

编译后:

Sass

.div1 .span1 { height: 12px; } .div1 .div2 { width: 16px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
.div1 .span1 {
  height: 12px;
}
.div1 .div2 {
  width: 16px;
}
 
/*# sourceMappingURL=test.css.map */

5.行使&引用父成分

源代码:

Sass

.div1{ &:hover{ cursor: hand; } }

1
2
3
4
5
.div1{
    &:hover{
        cursor: hand;
    }
}

编译后:

CSS

.div1:hover { cursor: hand; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
.div1:hover {
  cursor: hand;
}
 
/*# sourceMappingURL=test.css.map */

6.注释:

有二种情势:

(1卡塔尔国//comment:该注释只是在.scss源文件中有,编写翻译后的css文件中从未。

(2)/*! */:主要注释,任何style的css文件中都会有,常常放置css文件版权表达等新闻。

(3)/* */:该注释在compressed的style的css中尚无,别的style的css文件都会包罗。

备注:日常(1卡塔 尔(阿拉伯语:قطر‎(2卡塔尔国使用的多些

7.同意世襲:@extend 类名

源代码:

Sass

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }

1
2
3
4
5
6
7
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
/*# sourceMappingURL=test.css.map */

潜心:即使在class2前面有设置了class1的品质,那么也会潜移默化class2,如下:

源代码:

CSS

.class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; }

1
2
3
4
5
6
7
8
9
10
.class1{
    font-size:19px;
}
.class2{
    @extend .class1;
    color:black;
}
.class1{
    font-weight:bold;
}

编译后:

CSS

.class1, .class2 { font-size: 19px; } .class2 { color: black; } .class1, .class2 { font-weight: bold; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
.class1, .class2 {
  font-size: 19px;
}
 
.class2 {
  color: black;
}
 
.class1, .class2 {
  font-weight: bold;
}
 
/*# sourceMappingURL=test.css.map */

可以预知sass不是单遍编写翻译。

8.援用外界css文件(Partials卡塔尔

突发性网页的不等部分会分成两个文件来写样式,可能引用通用的某个样式,那么能够利用@import。

源代码:

Sass

@import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss";

1
2
3
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

编译后:

CSS

h1 { font-size: 17px; } h2 { font-size: 17px; } h3 { font-size: 17px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}
 
/*# sourceMappingURL=test.css.map */

其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。常常景观下,复用的文本名假使以下划线_开班的话,Sass会认为该文件是一个partial file,不会将其编写翻译为css文件,主要成效是要因此import援用。

9.mixin和include:

mixin相仿于C语音的宏,存款和储蓄通用模块,通过@include引用。

源代码:

Sass

@mixin common{ display:block; margin:0 auto; } .class1{ font-size:16px; @include common; }

1
2
3
4
5
6
7
8
@mixin common{
    display:block;
    margin:0 auto;
}
.class1{
    font-size:16px;
    @include common;
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin: 0 auto; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
.class1 {
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
 
/*# sourceMappingURL=test.css.map */

仍然是能够更加灵活,像函数近似,如下:

源代码:

Sass

@mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; } .class1{ font-size:16px; @include common(12px,13px,15px); } .class2{ font-size:16px; @include common(12px,13px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@mixin common($value1,$value2,$defaultValue:12px){
    display:block;
    margin-left:$value1;
    margin-right:$value2;
    padding:$defaultValue;
}
.class1{
    font-size:16px;
    @include common(12px,13px,15px);
}
.class2{
    font-size:16px;
    @include common(12px,13px);
}

编译后:

CSS

.class1 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 15px; } .class2 { font-size: 16px; display: block; margin-left: 12px; margin-right: 13px; padding: 12px; } /*# sourceMappingURL=test.css.map */

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.class1 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 15px;
}
 
.class2 {
  font-size: 16px;
  display: block;
  margin-left: 12px;
  margin-right: 13px;
  padding: 12px;
}
 
/*# sourceMappingURL=test.css.map */

最终,bootstrap第四版发表了下载,并且从less转移到了sass,可以下载里面看看它里面包车型地铁scss代码,心得一下,只怕你会意识更加多有趣的用法。

(完)

 

1 赞 2 收藏 评论

图片 3

安装ruby

http://rubyinstaller.org/downloads/

天猫商城镜像

https://gems.ruby-china.org/

转换镜像:( 如报错,请把

$gem update --system # 这里请翻墙一下$gem -v2.6.3

$gem sources --add  --remove 

$gem sources -l

# 确认保障独有 gems.ruby-china.org

步骤:

step1

新建.scss文件,依照sass语法编写

step2

打开ruby 命令

进入各麻芋果件夹

如在F盘,可一贯输入F: 回车

如f://study/exercise/test.scss

则输入 cd f:/study/exercise 回车

SASS文件正是不可胜举的文书文件,里面能够一贯行使CSS语法。文件后缀名是.scss,意思为Sassy CSS。

下边的指令,能够在荧屏上展现.scss文件转载的css代码。(假若文件名叫test。卡塔 尔(阿拉伯语:قطر‎

sass test.scss

比方要将显示结果保存成文件,前边再跟多个.css文件名。

sass test.scss test.css

SASS提供七个编译风格的选项:

* nested:嵌套缩进的css代码,它是私下认可值。

* expanded:未有缩进的、扩张的css代码。

* compact:简洁格式的css代码。

* compressed:压缩后的css代码。

生育条件在那之中,经常采取最终三个增选。

sass --style compressed test.sass test.css

您也得以让SASS监听有个别文件或目录,风姿浪漫旦源文本有改造,就自动生成编写翻译后的本子。

// watch a file

sass --watch input.scss:output.css

// watch a directory

sass --watch app/sass:public/stylesheets

三、基本用法

3.1 变量

SASS允许使用变量,全数变量以$早先。

$blue : #1875e7;

div {

color : $blue;

}

若是变量需求镶嵌在字符串之中,就非得供给写在#{}之中。

$side : left;

.rounded {

border-#{$side}-radius: 5px;

}

3.2 总结作用

SASS允许在代码中使用算式:

body {

margin: (14px/2);

top: 50px + 100px;

right: $var * 10%;

}

3.3 嵌套

SASS允许接纳器嵌套。比如,上面包车型大巴CSS代码:

div h1 {

color : red;

}

能够写成:

div {

h1 {

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:

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:关于sass的安装及使用教程,Sass用法指南

关键词: