Encountering Sass and Compass - Sass Chapter

For a web developer who switches from backend to frontend, the biggest trouble is writing CSS. Anyone who knows CSS knows that it can develop web page styles, but it cannot be used for programming. It feels that the coupling is quite high. If If you want to facilitate future maintenance, you can only modify or even rewrite a considerable part of the CSS sentence by sentence. With the influx of back-end personnel into the front-end industry, CSS has gained a new lease of life. People have begun to add programming elements to CSS, which is the "CSS preprocessor". Its basic idea is to use a specialized programming language to design web page styles, and then compile it into a normal CSS file. Below we combine the official documentation and the usage guide of teacher Ruan Yifeng to systematically summarize the main usage of Sass.

1.Sass installation

Sass is written in Ruby language. We must install Ruby first before installing Sass. The process of installing Ruby will not be described in detail. After installing Ruby, you can directly enter the following command on the command line (windows in cmd)

<code>gem install sass
</code>

2.Use of Sass

Sass files are ordinary text files with two suffixes: .sass and .scss. The coding style of files with the suffix .sass does not require adding braces, but it needs to handle indentation and other operations, as follows

<code>*
    margin:0;
    padding:0;
</code>

The encoding style of files with the suffix .scss is biased towards the normal CSS style as follows:

<code>*{
    margin:0;
    padding:0;
}
</code>

Sass will officially update both styles in parallel, so which style you prefer depends on personal preference. Since I prefer the .scss file suffix, the following examples will be based on the .scss file style.

The following command can display the css converted from the .scss file on the screen (assuming the file name is test)

<code>sass test.scss
</code>

If you want to convert the .scss file directly into a css file, you need to follow it with the .css file name

<code>sass test.scss test.css
</code>

Sass provides four compilation style options

<code>* nested: 嵌套缩进的css的代码，默认
* expanded：没有缩进、扩展的css代码
* compact：简介格式的css代码
* compressed：压缩后的css代码
</code>

We can switch the compilation style with the following command

<code>sass --style compressed test.scss test.css
</code>

We can also let Sass monitor a certain file or directory, and once the source file changes, it will automatically generate a compiled version

<code>//  watch a file

sass --watch test.scss:test.css

//  watch a direcoty

sass --watch app/sass:public/stylesheets
</code>

If you have students who use webStrom to develop, you can add File Watchers, but I feel it is not as good as turning on the entire directory to monitor. One thing to note is that different batch processes correspond to different suffix name files, that is, sass.bat corresponds to .sass files, scss.bat corresponds to .scss file

3.Basic usage of Sass

3.1 Import

The import (@import) rules of Sass are different from those of CSS. Let us review the shortcomings of CSS @import import: When CSS @imports a file, it will not be imported immediately, only the css that references it. After the file is downloaded and parsed, the browser will know that there is another css that needs to be downloaded, and then download it. Then after downloading, it will start a series of operations such as parsing and building the render tree, resulting in the css being unable to be downloaded in parallel. However, when Sass is imported (@import), the scss file of @import will be merged into only one CSS file during compilation. But if you import a css file such as @import 'reset.css' in a sass file, the effect is the same as an ordinary CSS imported style file. The imported css file will not be merged into the compiled file, but will exist in @import mode. .

All sass import files can ignore the suffix .scss. Generally speaking, the basic file naming method starts with , such as mixin.scss. This kind of file does not need to be underlined when imported, but can be written as @import "mixin".

Imported sass file a.scss:

<code>//a.scss
//-------------------------------
body {
  background: #eee;
}
</code>

The sass file b.scss that needs to be imported is:

<code>@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 
</code>

Translated b.css style:

<code>@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}
</code>

As can be seen from the above code, after b.scss is compiled, reset.css continues to be imported, while a.scss is integrated.

3.2 Notes

Sass has two comment methods, one is the standard CSS comment method /* */, and the other is a single-line comment in the form of //double slashes, but this single-line comment will not be translated. Standard css comments

<code>/*
 *我是css的标准注释
 *设置body内距
 */
body{
  padding:5px;
} 
</code>

Double-slash single-line comments Single-line comments are the same as comments in the JavaScript language, using slashes (//), but single-line comments will not be entered into CSS.

<code>//我是双斜杠表示的单行注释
//设置body内距
body{
     padding:5px; //5px
} 
</code>

3.3 Variables

Sass variables must start with $, followed by the variable name, and the variable value and variable name need to be separated by a colon (:) (just like CSS property settings). If the value is followed by !default, then Represents the default value.

3.3.1 Ordinary variables

After definition, it can be used globally.

<code>//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}
</code>

3.3.2 Default variables

Sass’s default variable only needs to add !default after the value.

<code>//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}
</code>

Sass’s default variables are generally used to set default values ​​and then override them according to needs. The overwriting method is also very simple. You only need to re-declare the variable before the default variable

<code>//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}
</code>

You can see that the compiled line-height is now 2, not our default 1.5. The value of default variables can be very useful when doing component development.

3.3.3 Special variables

Generally, the variables we define are attribute values ​​and can be used directly. However, if the variables are used as attributes or in some special circumstances, they must be used in the form of #{$variables}.

<code>//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}
</code>

3.3.4 Multi-valued variables

Multi-valued variables are divided into list type and map type. Simply put, the list type is a bit like an array in js, and the map type is a bit like an object in js.

3.3.4.1 list

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

<code>//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
</code>

使用

<code>//sass style
//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}
</code>

3.3.4.2 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即可） 定义

<code>$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
</code>

使用

<code>//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; 
}
</code>

3.4 嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

3.4.1 选择器嵌套

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

<code>//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}
</code>

3.4.2 属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

<code>//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; 
}
</code>

3.5 混合(mixin)

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

3.5.1 无参数mixin

<code>//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}
</code>

3.5.2 有参数mixin

<code>//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}
</code>

3.5.3 多个参数mixin

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

<code>//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;
}
</code>

3.5.4 多组值参数mixin

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

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

3.5.5 @content

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

<code>//sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}                     
</code>

3.6 继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

3.6.1 普通继承

<code>//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;
}
</code>

3.6.2 占位选择器%

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

<code>//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;
}
</code>

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

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

3.7 函数

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

<code>//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}
</code>

3.8 运算

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

<code>$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width
</code>

3.9 条件判断及循环

3.9.1 @if判断

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

<code>//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}
</code>

3.9.2 三目判断

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

<code>if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
</code>

3.9.3for循环

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

<code>//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; 
}
</code>

3.9.4 @each循环

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

3.9.4.1 单个字段list数据循环

<code>//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}
</code>

3.9.4.2 多个字段list数据循环

<code>//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}
</code>

3.9.4.3多个字段map数据循环

<code>//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; 
}
</code>

（完）