sass介绍及使用

时间 2019-12-05

标签 sass 介绍使用繁體版

原文原文链接

<br/>javascript

<img src="http://sass.bootcss.com/asset...; height="180"/>css

SASS 是什么html

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sass 是成熟、稳定、强大的 CSS 扩展语言。vue

SASS 的特色java

兼容 CSS 语法、功能丰富、成熟node

webpack

I. SASS 简介

是 CSS 的扩展，是 CSS 的预处理。提供了许多便利的写法，大大节省了设计者的时间，使得 CSS 的开发，变得简单和可维护。git

sass 文件有两种文件名后缀，分别是 .sass 和 .scss，.sass 是严格的嵌套缩进规则，而 .scss 的则是跟写 css 代码相似的大括号，分号这样的语法规则。github

CSS 预处理器技术已经很是的成熟，并且也涌现出了不少种不一样的 CSS 预处理器语言，好比说：web

Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。

Sass 和 SCSS 区别

Sass 和 SCSS 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

II. SASS 的使用

安装方法

npm install sass -g

使用方法

sass test.scss [test.css]

sass 在线转换

sass 编译风格的选项

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

nested：嵌套缩进的 css 代码，它是默认值。
expanded：没有缩进的、扩展的 css 代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。

生产环境当中，通常使用最后一个选项。

sass --style compressed test.sass test.css

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

sass --watch input.scss:output.css // watch a file
sass --watch app/sass:public/stylesheets // watch a directory

基本用法

1.数据类型

Sass 和 JavaScript 语言相似，也具备本身的数据类型，在 Sass 中包含如下几种数据类型：

数字: 如，一、二、 1三、 10px；
字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
颜色：如，blue、 #04a3f九、 rgba(255,0,0,0.5)；
布尔型：如，true、 false；
空值：如，null；
值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

<h4>字符串</h4>

有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
无引号字符串 (unquoted strings)，如 sans-serifbold。

使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: 'Hi, Firefox users!';
  }
}

body.firefox .header:before {
  content: 'Hi, Firefox users!';
}

2.变量

SASS 容许使用变量，全部变量以&dollar;开头。

$blue: #1875e7;
div {
  color: $blue;
}

若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中。

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

<h4>普通变量和默认变量</h4>

sass 的默认变量通常是用来设置默认值，而后根据需求来覆盖的，覆盖的方式也很简单，只须要在默认变量以前从新声明下变量便可。

默认变量的价值在进行组件化开发的时候会很是有用。

$fontSize: 14px;
$fontSize: 12px !default;
body {
  font-size: $fontSize;
}
/*普通变量与默认变量*/
body {
  font-size: 14px;
}

<h4>局部变量和全局变量</h4>

从 3.4 版本开始，Sass 已经能够正确处理做用域的概念

$color: orange !default; //定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color; //调用全局变量
}
em {
  $color: red; //定义局部变量
  a {
    color: $color; //调用局部变量
  }
}
span {
  color: $color; //调用全局变量
}

.block {
  color: orange;
}

em a {
  color: red;
}

span {
  color: orange;
}

<h4>全局变量的影子</h4>

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

同上一个例子

<h4>何时声明变量？</h4>

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值全部的表现都与变量有关（非巧合）。

基本上，没有理由声明一个永远不须要更新或者只在单一地方使用变量。

基本用法

3.计算功能

<h5>加减乘除都不容许不一样单位进行运算</h5>

body {
  margin: (14px/2);
  top: 50px + 100px;
}

<h4>加法 + 减法</h4>

携带不一样类型的单位时，在 Sass 中计算会报错

.box {
  width: 20px + 1em;
}

$full-width: 960px;

.content {
  width: $full-width - 1em;
}
// Incompatible units: 'em' and ‘px'.”

<h4>乘法</h4>

可以支持多种单位（好比 em ,px , %）

乘法运算时，两个值单位相同时，只须要为一个数值提供单位便可

.box {
  width: 10px * 2;
  // width: 10px * 2px 错误;
}

<h4>除法</h4>

在 Sass 中作除法运算时，直接使用“/”符号作为除号时，将不会生效，编译时既得不到咱们须要的效果，也不会报错。

这样的结果对于你们来讲没有任何意义。要修正这个问题，只须要给运算的外面添加一个小括号()

'/' 符号被看成除法运算符时有如下几种状况：

若是数值或它的任意部分是存储在一个变量中或是函数的返回值。
若是数值被圆括号包围。
若是数值是另外一个数学表达式的一部分。

p {
  font: 10px/8px; // 纯 CSS，不是除法运算
  height: (16px/8px);
  $width: 1000px;
  width: $width/2; // 使用了变量，是除法运算
  width: round(1.5) / 2; // 使用了函数，是除法运算
  height: (500px/2); // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

p {
  font: 10px/8px;
  height: 2;
  width: 500px;
  width: 1;
  height: 250px;
  margin-left: 9px;
}

<h5>除法运算时，若是两个值带有相同的单位值时，除法运算以后会获得一个不带单位的数值。</h5>

<h4>颜色运算</h4>

全部算数运算都支持颜色值，而且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。

p {
  color: #010203 + #040506; // 01+04 02+05 03+06
  // 考虑颜色函数 将来版本不支持
}

<h4>字符运算</h4>

在 Sass 中能够经过加法符号“+”来对字符串进行链接。能够链接变量和和字符

$content: 'Hello' + '' + 'Sass!';
.box:before {
  content: ' #{$content} ';
}

div {
  cursor: 'e' + -resize;
  position: re + 'lative';
}

.box:before {
  content: ' HelloSass! ';
}

div {
  cursor: 'e-resize';
  position: relative;
}

基本用法

4.嵌套

div {
  hi {
    color: red;
  }
}

sass 的嵌套分为 3 种：选择器嵌套、属性嵌套、伪类嵌套

<h4>选择器嵌套</h4>

& 有 2 种用法：1.替换空格 2.选择父类

nav {
  a {
    color: red;
    .b {
      & .c {
        font-size: 12px;
      }
      &:hover {
        color: green;
      }
    }
    head & {
      color: green;
    }
  }
}

nav a {
  color: red;
}
nav a .b .c {
  font-size: 12px;
}
nav a .b:hover {
  color: green;
}
head nav a {
  color: green;
}

<h4>属性嵌套</h4>

CSS 有一些属性前缀相同，只是后缀不同，好比：border-top/border-right，与这个相似的还有 margin、padding、font 等属性。

.box {
  font: {
    size: 12px;
    weight: bold;
  }
}

.box {
  font-size: 12px;
  font-weight: bold;
}

<h4>伪类嵌套</h4>

.box {
  &:before {
    content: '伪元素嵌套';
  }
}

选择器嵌套最大的问题是将使最终的代码难以阅读，咱们应该尽量避免选择器嵌套。

基本用法

5.注释

SASS 共有两种注释风格。

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

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

在/*后面加一个感叹号，表示这是"重要注释"。即便是压缩模式编译，也会保留这行注释，一般能够用于声明版权信息。

css 代码的重用

1.继承

SASS 容许一个选择器，继承另外一个选择器。好比，现有 class1：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

要继承 .btn，就要使用@extend 命令：

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-default {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来的 CSS 会将选择器合并在一块儿，造成组合选择器：

.btn,
.btn-primary,
.btn-default {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-default {
  background-color: orange;
  color: #fff;
}

css 代码的重用

2.Mixin(混合宏)

须要重复使用大段的样式时，使用变量就没法达到咱们目目的，这时候可使用@mixin，定义一个代码块。

@mixin left {
  float: left;
  margin-left: 10px;
}

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

div {
  @include left;
}

使用的时候，根据须要加入参数：

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);
}

mixin 的强大之处，在于能够指定参数和缺省值。

@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}

混合宏除了能传一个参数以外，还能够传多个参数

@mixin center($width, $height) {
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}
.box-center {
  @include center(500px, 300px);
}

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一个特别的参数“…”。当混合宏传的参数过多之时，可使用参数来替代，如：

@mixin box-shadow($shadows...) {
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000, 0.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}
.box {
  @include box-shadow(0 0 1px rgba(#000, 0.5), 0 0 2px rgba(#000, 0.2));
}

.box1 {
  @include box-shadow();
}

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

.box1 {
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

<h4>混合宏的不足</h4>

混合宏在实际编码中给咱们带来不少方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。好比在不一样的地方调用一个相同的混合宏时。

@mixin border-radius {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.box {
  @include border-radius;
  margin-bottom: 5px;
}
.btn {
  @include border-radius;
}

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

并不能智能的将相同的样式代码块合并在一块儿。这也是 Sass 的混合宏最不足之处。

css 代码的重用

3.占位符%placeholder

他能够取代之前 CSS 中的基类形成的代码冗余的情形。由于 %placeholder 声明的代码，若是不被 @extend 调用的话，不会产生任何代码。

%mt5 {
  // 没有被@extent调用就不会被编译到css中
  margin-top: 5px;
}
%pt5 {
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

经过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一块儿。

<h4>混合宏 VS 继承 VS 占位符</h4>

css 代码的重用

3.函数

自备了一系列的函数功能。其主要包括：

字符串函数
数字函数
列表函数
颜色函数
Introspection 函数
三元函数等

<h4>字符串函数</h4>

unquote(&dollar;string) : Removes quotes from a string.

quote(&dollar;string) : Adds quotes to a string.

to-lower-case(&dollar;string) : Converts a string to lower case.

<h4>数字函数</h4>

round(&dollar;number) : Rounds a number to the nearest whole number.

ceil(&dollar;number) : Rounds a number up to the next whole number.

floor(&dollar;number) : Rounds a number down to the previous whole number.

<h4>列表函数</h4>

join($list1, $list2, [$separator, $bracketed]) : Joins together two lists into one.

append($list1, $val, [$separator]) : Appends a single value onto the end of a list.

<h4>Map 函数</h4>

map-keys(&dollar;map) : Returns a list of all keys in a map.

map-values(&dollar;map) : Returns a list of all values in a map.

map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

<h4>颜色函数</h4>

.test {
  text: to-upper-case(aaaaa);
  text: to-lower-case(aA-aAAA-aaa);
}

.footer {
  width: round(12.3px);
}

.footer1 {
  width: index(1px solid red, red);
}

$social-colors: (
  dribble: #ea4c89,
  facebook: #3b5998,
  github: #171515,
  google: #db4437,
  twitter: #55acee
);
.btn-dribble {
  color: map-get($social-colors, facebook);
}

4.插入文件

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

@import 'path/filename.scss';

若是插入的是.css 文件，则等同于 css 的 import 命令。

@import 'foo.css';

sass 高级用法

1.条件语句

@if lightness($color) >30% {
  background-color: #000;
} @else {
  background-color: #fff;
}

2.循环语句

<h4>for 循环</h4>

@for $i **from** start **through** end || **@for** $i from start to end

区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

@for $i from 1 to 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
@for $i from 1 through 3 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-1 {
  border: 1px solid blue;
}

.border-2 {
  border: 2px solid blue;
}

.border-3 {
  border: 3px solid blue;
}

@for 应用在网格系统生成各个格子 class 的代码：

//SCSS
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
  .#{$grid-prefix}#{$i} {
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }
}

<h4>while 循环</h4>

$i: 6;
@while $i>0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

<h4>each 循环</h4>

@each 循环就是去遍历一个列表，而后从列表中取出对应的值。

$list: adam john wynn mason kuroir; //$list 就是一个列表

@mixin author-images {
  @each $author in $list {
    .photo-#{$author} {
      background: url('/images/avatars/#{$author}.png') no-repeat;
    }
  }
}

.author-bio {
  @include author-images;
}

sass 高级用法

3.自定义函数

SASS 容许用户编写本身的函数。

@function double($n) {
  @return $n * 2;
}

#sidebar {
  width: double(5px);
}

II. SASS @规则

<h4>@media</h4>

Sass 中的 @media 指令和 CSS 的使用规则同样的简单，但它有另一个功能，能够嵌套在 CSS 规则中。有点相似 JS 的冒泡功能同样，若是在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

<h4>@at-root</h4>

@at-root 从字面上解释就是跳出根元素。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }
}

.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

<h4>@debug</h4>

@debug 在 Sass 中是用来调试的，@debug 指令以后，在命令终端会输出你设置的提示 DEBUG:

<h4>@warn</h4>

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @warn "你须要将#{$x}值设置在10之内的数";
  }
}

.test {
  @include error(15);
}

<h4>@error</h4>

@mixin error($x) {
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你须要将#{$x}值设置在10之内的数";
  }
}

.test {
  @include error(15);
}

III. vue 中引入 sass

安装相关依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

在 build 文件夹下的 webpack.base.conf.js 的 rules 里面添加配置

{
  "test": /\.sass$/,
  "loaders": ["style", "css", "sass"]
}

在*.vue 中修改 style 标签

<style lang="scss">

VI. 总结

介绍 SASS

Sass 和 Scss 区别

编译风格

基本用法：数据类型、变量、计算功能、嵌套、注释

代码重用：继承、混合宏、占位符、函数、文件插入

高级用用：条件语句、循环、自定义函数

sass@规则：media、at-root、debug、warn、error

vue 中使用 sass

1. sass 介绍以及 gulp 的简单使用（MAC OX 系统）
2. scss与sass介绍
3. 二、Sass/Scss 介绍
4. Sass介绍及入门教程
5. SIPP介绍以及使用介绍
6. 介绍SitePoint Sass参考
7. express.js的介绍及使用
8. ElasticSearch的介绍及使用
9. lombok介绍及使用
10. vsftpd 介绍及使用
更多相关文章...
• 网站主机介绍 - 网站主机教程
• TortoiseSVN 使用教程 - SVN 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Composer 安装与使用