关于sass的安装及使用教程

2019-09-19 05:10 来源:未知

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):

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)开发过程中,只需要修改scss文件,然后编译;前端页面只需要引用相应的css文件即可。

3.侦听文件和文件夹

  如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。

(1)侦听文件:

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

5.2 循环语句

四、代码的重用

 

4.1 继承

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

  .class1 {
    border: 1px solid #ddd;
  }

class2要继承class1,就要使用@extend命令:

  .class2 {
    @extend .class1;
    font-size:120%;
  }

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) {
style="font-size: 16px;">    border-#{$vert}-#{$horz}-radius: $radius;
style="font-size: 16px;">    -moz-border-radius-#{$vert}#{$horz}: $radius;
style="font-size: 16px;">    -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";

background-color: #fff;

一、什么是SASS

 

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

本文总结了SASS的主要用法。我的目标是,有了这篇文章,日常的一般使用就不需要去看官方文档了。

$i: 6;

二、安装和使用

 

2.1 安装

SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。

假定你已经安装好了Ruby,接着在命令行输入下面的命令:

  gem install sass

然后,就可以使用了。

2.2 使用

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

SASS的官方网站,提供了一个在线转换器。你可以在那里,试运行下面的各种例子。

 

}

 

}

五、高级用法

 

5.1 条件语句

@if可以用来判断:

  p {
    @if 1 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
  }

配套的还有@else命令:

  @if lightness($color) > 30% {
    
  } @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);
  }

原文地址:

a {

三、基本用法

 

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 {
    hi {
      color:red;
    }
  }

属性也可以嵌套,比如border-color属性,可以写成:

  p {
    border: {
      color: red;
    }
  }

注意,border后面必须加上冒号。

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

  a {
    &:hover { color: #ffb3ff; }
  }

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

  /*! 
    重要注释!
  */

&:hover { color: #ffb3ff; }

border: 1px solid #ddd;

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

/*!

}

@mixin left($value: 10px) {

淘宝镜像

color : red;

} @else {

*/

border-#{$vert}-#{$horz}-radius: $radius;

可以写成:

使用的时候,根据需要加入参数:

#sidebar {

@extend .class1;

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

@if 5 < 3 { border: 2px dotted; }

background-color: #000;

@for $i from 1 to 10 {

border: #{$i}px solid blue;

}

margin-left: 10px;

border: {

进入所在文件夹

.rounded {

}

.class2 {

$gem sources --add  --remove 

float: left;

step2

}

4.3 颜色函数

@import "foo.css";

}

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

使用@mixin命令,定义一个代码块。

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

打开ruby 命令

div {

lighten(#cc3, 10%) // #d6d65c

@include left;

}

步骤:

sass --watch input.scss:output.css

三、基本用法

SASS共有两种注释风格。

4.1 继承

.class1 {

SASS允许用户编写自己的函数。

-webkit-border-#{$vert}-#{$horz}-radius: $radius;

.border-#{$i} {

# 确保只有 gems.ruby-china.org

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

五、高级用法

color: red;

}

属性也可以嵌套,比如border-color属性,可以写成:

#footer { @include rounded(top, left, 5px); }

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

color:red;

sass --watch app/sass:public/stylesheets

div h1 {

注意,border后面必须加上冒号。

margin-right: $value;

float: left;

生产环境当中,一般使用最后一个选项。

* expanded:没有缩进的、扩展的css代码。

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

}

.item-#{$i} { width: 2em * $i; }

}

如果要将显示结果保存成文件,后面再跟一个.css文件名。

使用@include命令,调用这个mixin。

class2要继承class1,就要使用@extend命令:

@import "path/filename.scss";

}

body {

mixin的强大之处,在于可以指定参数和缺省值。

.#{$member} {

@function double($n) {

}

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

}

margin: (14px/2);

}

4.2 Mixin

sass test.scss

3.1 变量

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

}

font-size:120%;

@if lightness($color) > 30% {

@import命令,用来插入外部文件。

step1

3.2 计算功能

@while $i > 0 {

@mixin left {

}

下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)

sass test.scss test.css

配套的还有@else命令:

}

}

h1 {

width: double(5px);

grayscale(#cc3) // #808080

}

下面是一个mixin的实例,用来生成浏览器前缀。

each命令,作用与for类似:

}

$blue : #1875e7;

$gem sources -l

div {

div {

p {

5.1 条件语句

在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:

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

// watch a file

// watch a directory

Mixin有点像C语言的宏(macro),是可以重用的代码块。

SASS提供了一些内置的颜色函数,以便生成系列颜色。

5.3 自定义函数

}

@return $n * 2;

SASS允许一个选择器,继承另一个选择器。比如,现有class1:

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

#navbar li { @include rounded(top, left); }

$i: $i - 2;

darken(#cc3, 10%) // #a3a329

@if可以用来判断:

4.4 插入文件

complement(#cc3) // #33c

如果插入的是.css文件,则等同于css的import命令。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

你也可以让SASS监听某个文件或目录,一旦源文件有变动,就自动生成编译后的版本。

SASS允许使用变量,所有变量以$开头。

background-image: url("/image/#{$member}.jpg");

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

3.3 嵌套

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

@include left(20px);

SASS允许选择器嵌套。比如,下面的CSS代码:

也支持while循环:

SASS支持for循环:

p {

3.4 注释

安装ruby

color : $blue;

-moz-border-radius-#{$vert}#{$horz}: $radius;

}

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

top: 50px 100px;

right: $var * 10%;

div {

@mixin rounded($vert, $horz, $radius: 10px) {

}

@each $member in a, b, c, d {

@if 1 1 == 2 { border: 1px solid; }

重要注释!

使用的时候,可以像下面这样调用:

如在F盘,可直接输入F: 回车

sass --style compressed test.sass test.css

四、代码的重用

http://rubyinstaller.org/downloads/

$side : left;

}

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

* compressed:压缩后的css代码。

TAG标签: css 前端开发 sass
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:关于sass的安装及使用教程