CSS course webpack SASS

Previous《 Webpack2 and Sass Setup Tutorial 》The installation of Sass and the setting of webpack have been explained, so this article is about how to use Sass, but it does not involve the advanced part. It is a relatively basic tutorial and belongs to the beginner

Variables

Sass supports 7 data types, as follows

1. Value (e.g. 1.2, 13, 10px)
2. String (e.g. "foo", 'bar', baz)
3. Color (e.g. blue, # 04a3f9, rgba (255, 0, 0, 0.5))
4. Boolean value (e.g. true, false)
5. Empty (e.g. null)
6. Array (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans serif)
7. Mapping (e.g. (key1: value1, key2: value2))

For details, see: Here

Variables need to be $ To identify, see the following example:

scss:

 $title-font: normal 24px/1.5 'Open Sans', sans-serif; $cool-red: #F44336; $box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2); h1.title { font: $title-font; color: $cool-red; } div.container { color: $cool-red; background: #fff; width: 100%; box-shadow: $box-shadow-bottom-only; }

css:

 h1.title { font: normal 24px/1.5 "Open Sans", sans-serif; color: #F44336; } div.container { color: #F44336; background: #fff; width: 100%; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2); }

Nesting

This part is used most frequently. See the following example

scss:

 ul{ margin:0; li{ list-style:none; } }

css:

 ul{ margin:0; } ul li{ list-style:none; }

The parent selector is used when nesting. The key here is &

scss:

 a{ font-size:14px; &:hover{ font-size:18px; } & &-biger{ font-size:22px; } }

css:

 a{ font-size:14px; } a:hover{ font-size:18px; } a a-biger{ font-size:22px; }

Of course, attributes can also be nested, as follows

scss:

 body{ font:{ family: sans-serif; size:15px; weight:normal; } } .nav{ border:1px solid #eee { left:0; right:0; } }

css:

 body{ font-family:sans-serif; font-size:15px; font-weight:normal; } .nav{ border:1px solid #eee; border-left:0; border-right:0; }

Mixins

Mixed use has two keywords: @mixin and @include , examples are as follows

scss:

 @mixin alert{ color:#eee; background-color:#111; a{ color:red; } } .alert-warning{ @include alert; }

css:

 .alert-warning{ color:#eee; background-color:#111; } .alert-warning a{ color:red; }

If parameters are required, they are as follows

scss:

 @mixin alert($text-color,$bg-color){ color:$text-color; background-color:$bg-color; a{ color:darken($text-color,10%); } } .alert-warning{ @include alert(#8a6d3b,#eee); }

css:

 .alert-warning{ color:#eee; background-color:#111; } .alert-warning a{ color:#66512c; }

Extend

Keyword is required for expansion @extend , its working mode is similar to that of mixing, and attention should be paid to the distinction. The following is an example

scss:

 .dialog-button { box-sizing: border-box; color: #ffffff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); padding: 12px 40px; cursor: pointer; } .confirm { @extend .dialog-button; background-color: #87bae1; float: left; } .cancel { @extend .dialog-button; background-color: #e4749e; float: right; }

css:

 .dialog-button, .confirm, .cancel { box-sizing: border-box; color: #ffffff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); padding: 12px 40px; cursor: pointer; } .confirm { background-color: #87bae1; float: left; } .cancel { background-color: #e4749e; float: right; }

Operations

Sass can also do some basic mathematical calculations. The following is an example

scss:

 $width: 800px; .container { width: $width; } .column-half { width: $width / 2; } .column-fifth { width: $width / 5; }

css:

 .container { width: 800px; } .column-half { width: 400px; } .column-fifth { width: 160px; }

For more operations related information, see: here

Functions

Sass has a large number of functions for us to call. The following are darken($color, $amount) Use examples of

scss:

 $awesome-blue: #2196F3; a { padding: 10px 15px; background-color: $awesome-blue; } a:hover { background-color: darken($awesome-blue,10%); }

css:

 a { padding: 10px 15px; background-color: #2196F3; } a:hover { background-color: #0c7cd5; }

For more functions, see: Here

Other

@import The usage of is as follows

base.scss:

 body{ padding:0; margin:0; }

scss:

 @import "base";

css:

 body{ padding:0; margin:0; }

The usage of notes is as follows

 /* *Multiline comment */

Single-Line Comments

 //Single line comment

Mandatory comment

 /*!  Multiline comment*/

Of course, there are more, such as control flow and expression（ Here )

reference resources

• tutorialzine.com/2016/01/learn-sass-in-15-minutes/
• sass-lang.com/documentation/file. SASS_REFERENCE.html
• sass-lang.com/documentation/Sass.html

Lots of content, so far~

This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.