Summary of learning about SASS

Preface

SASS is a CSS preprocessor (css preprocessor). Its basic idea is to use a specialized programming language to design the web page style, and then compile it into a normal CSS file.

SASS provides four compilation style options:

• nested: Nested indented css code, which is the default value.

• expanded: Unindented, expanded css code.

• compact: CSS code in a concise format.

• compressed: Compressed css code.

Import file

@import command is used to import external files.

@import "path/filename.scss";

If you import a .css file, it is equivalent to the css import command.

Comments

Sass has two comment methods, one is the standard css comment method /* */, and the other is //double slash form Single-line comments, but such single-line comments will not be translated.

1 Variables

SASS allows the use of variables, all variables start with $

Ordinary variables

After definition, they can be in the global scope For internal use.

Default variable

The default variable of sass only needs to be added with !default after the value.

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

The value of default variables can be very useful when doing component development.

Special variables

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

Multi-valued variables

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

global variable

Add !global after the variable value to become a global variable. This is not available yet, but it will be officially used in versions after Sass 3.4. The current sass

variable scope has been criticized, so this global variable is created.

2 Nesting

There are two types of nesting in sass: one is the nesting of selectors; the other is the nesting of attributes. What we usually talk about or use is the nesting of selectors.

In selector nesting, you can use & to indicate the parent

Element selector

Attribute nesting: The so-called attribute nesting means that some attributes have the same start Words such as

border-width and border-color all start with border.

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

@at-root: New function in sass3.3.0, used to break out of selector nesting.

3 Mixin

Use @mixin in sass to declare a mix. You can pass parameters. The parameter name starts with the $ symbol. Multiple parameters are separated by commas. You can also set default values ​​for the parameters. . The declared @mixin is called through @

include

Multiple parameter mixin

can be directly passed in the value when calling, for example, the number of passed parameters in @include is less than @ The number of parameters defined by the mixin is expressed in order. If there are insufficient parameters later, the default value will be used. If there are insufficient parameters and there is no default value, an error will be reported. In addition, you can also selectively pass in parameters, using parameter names and values ​​to pass in at the same time.

Multiple sets of value parameter mixin

If a parameter can have multiple sets of values, such as box-shadow, transition, etc., then the parameter needs to be represented by adding three dots after the variable, such as $variables ....

@content

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

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

** @mixin The style parsed after calling @include exists in the form of copy, while the following

Inheritance exists in the form of joint declaration, so from 3.2 After version .0, it is recommended to use @mixin to pass parameters, and instead of passing parameter classes, use the following inheritance%. **

4 Inheritance

In sass, selector inheritance allows a selector to inherit all styles of another selector and declare them jointly. To use selector inheritance, use the keyword @extend, followed by the selector to be inherited.

Placeholder selector%

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

占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

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

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

5 函数

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

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

6 运算

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

7 条件判断及循环

@if判断

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

三目判断

if($condition, $if_true, $if_false)

for循环

for循环有两种形式，分别为：@for $var from

@each循环

语法为：@each $var in

多个字段list数据循环

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

The above is the detailed content of Summary of learning about SASS. For more information, please follow other related articles on the PHP Chinese website!