Scss Getting Started

Scss Getting Started 1. Scss Introducing Other files

1. Introducing other. scss files

   @import 'index.scss'  

   In this case, the file is compiled and automatically merges the file and the current file into one. SCSS file

2. Introducing other. css Files

   @import 'index.css'

   and introduced. SCSS files are different, so introduced. The CSS file will not be merged with the current file after compilation into one. Scss file, but continues to be introduced as an outside chain

2. Scss Annotation Method

There are two types of annotations for SCSS

1. Block annotations
   /*
   */
2. Line Comment
   //

3. SCSS variables

The SCSS variable is divided into 3 types, beginning with the $ symbol, followed by the variable name. The variable name and the variable value are separated by a colon:

1. General variables

   $key: value;

2. Default variables

   $key: value!default;

   The default variables can be overridden by the following methods:

   $font: 12px;$font: 14px!default;

3. Special variables

   $fontSize:14px;font:#{$fontSize}

4. Multi-valued variables
   Multi-valued variables are divided into list map two types, list similar to the JS array, map similar to the object

4. Nesting

Nesting is divided into two types:

1. Selector nesting (currently used frequently)
2. Attribute nesting: Infrequently used
   ,& represents the parent element selector in the property selector

5. Mixing

@mixinThe calling @mixin method needs to use the@include

/*普通混合*/@mixin font{    line-height:10px;    color: #fff;}.footer{    @include font;}

The above equivalent:

.footer{    line-height: 10px;    color: #fff;}

/*带参数混合*/@mixin font($size:12px){  //这里面的参数是默认的意思    font-size: $size;}

.footer{    @include font(16px);

6. Inheritance

Using inheritance allows the selector to inherit all the styles of the specified selector, using the keyword @extend followed by the specified selector

.font{    font-size:14px;    height: 16px;}.footer{    @extend .font;    border-width: 2px;}

The above equivalent:

.font, .footer{    font-size:14px;    height: 16px;}.footer{    border-width: 2px;}

Positioning Selector
%Selector name, by @extend going to call, if not called, then the file will not appear after compiling the redundant CSS file

%dir{    font-size: 14px;}%clear{    overflow: hidden;}div{    @extend %dir;}

Only the %dir selector is called and is %clear filtered as a redundant file at compile time and will not appear in the compiled. css file

7. Functions

SASS has many functions built into it, and you can define functions yourself. To @function start the @return return value

@function per(data){    @return data/10px;}div{    font-size: per(140px);}

The above is equivalent to:

div{    font-size: 14px;}

8. Other functions

Other features include the following points

1. Operations: for four (subtraction) operations (numbers, colors, variables), the operator keeps one space before and after each
2. If judgment: @if can be used alone or in conjunction with @else, @else if
3. Trinocular operator: if (true,1px,2px), the value returned is 1px,if (false,1px,2px), the value returned is 2px
4. For loop, there are two ways to do this:
   1). @for Varfromthrough
   2). @forvar from to
   The only difference between the two is that the through includes the end number, and to does not include the end number
5. Each loop, @each $var in, lists and maps are represented as list and map type data, respectively.

Scss Getting Started