Css Preprocessor sass usage tutorial (Multi-image warning), sass usage tutorial

Css Preprocessor sass usage tutorial (Multi-image warning), sass usage tutorial

The css Preprocessor provides css dynamic language features, such as variables, functions, operations, inheritance, and nesting, to help organize and manage style files and develop projects more efficiently. The css Preprocessor can easily maintain and manage css Code, making the entire webpage more flexible and variable. For pre-processors, less and sass are widely used. There is no comparison here. The two are similar. sass is written based on Ruby, so compiling sass files requires the Ruby environment. We don't need to know much about the Ruby language when using sass. We only need to install the Ruby environment, while less is mainly running in the node environment. The functional syntax is similar. This article describes how to use sass in Ruby.

Ruby download and installation:

1. login to http://rubyinstaller.org/

　　

2. Click download to go to this page. download the version specified by the 64-bit windows arrow.

3. Directly install

After clicking finish, even if the installation is complete, we also need to go to the command line to check whether the installation is successful. Note that the ruby command line is not the command line under cmd.

Go to the command line:

Then install sass in ruby: Enter the command gem install sass

Enter sass-v, and the version number is displayed, even if the installation is successful.

Now, the download and installation are complete, and the Environment is set up. The syntax and related commands are described below.

Sass usage.

To enable more people to learn how to use sass, I will start from creating a new file and demonstrate it step by step.

1. I created a folder named sasstest on the desktop and created a file with the sass. scss suffix. (After creating a text document, change the name suffix to sass. scss)

 

Why is the sass suffix scss? In fact, sass has two syntax forms.

The first is scss, which is the syntax of our suffix format. This format is extended based on the CSS3 syntax, which means that each CSS style sheet is an equivalent SCSS file. In addition, SCSS also supports most CSS hacks statements and exclusive browser prefix syntaxes..scssAs the extension name.

The other is also the earliest syntax, called the indent syntax. It provides a more general method for writing CSS. It uses indentation instead of curly braces to indicate the nesting of selector. It uses line breaks instead of semicolons to separate attributes. Some people think this is easier to read and write than SCSS. The contraction syntax has all the features of Sass, although some syntaxes are slightly different. To use this syntax.sassAs the extension.

In fact, regardless of the syntax, any syntax file can be directly imported to another syntax file for use, and can also be converted to each other through the sass-convert command line tool.

I don't need to worry about these differences. I can use one of them. I am used to the first one. So I have been using the scss syntax.

2. The second step is to open sass. scss. You can use any editor. This article uses sublime text.

If you want to run sass, you need to use the command. Well, leave the syntax alone. In sass. scss, click a few lines to see if the command can be compiled into css. Read the command in advance.

 

After you click it, check the newly created folder and you will find that there is nothing.

Of course, you haven't monitored and run your sass code. How can this change? Do you still remember the ruby command line window? Yes, you need to tap the running command there to generate css code for sass.

Run sass file: sass input. scss output.css (the left side represents the sass input file, and the right side is the css output file)

The commands that sass monitors sass files include:

The so-called monitoring means that css files are generated whenever the sass file changes. This is different from running, and the monitoring is continuous at one time.

Monitor an sass file: sass -- watch input. scss: output.css (the sass input file on the left and the css output file on the right)

Monitor the entire folder: sass -- watch sass: css (the left side indicates the monitored folder path, and the right side indicates the Output Folder path)

Then, run our scss code to check the generated css. What I want is to generate a css folder under the sasstest folder to store the css file for convenient management.

1) Find the current folder. Because it is a desktop, the path is as follows:

Note: If a disk is exceeded, enter the disk as follows:

Write the corresponding commands according to the above three types.

2) Run: when running, the css folder cannot be generated. You need to manually add the css folder.

Instructions in this example:

Note: first go to the sasstest folder and then tap the command.

Result chart:

The first one is the generated cache file. When css is opened, you can see that,

In addition to css, there is also a map file. The sass file is equivalent to the source file, and the css file is equivalent to the compiled file. When a page problem is detected, what you see is css, however, you need to modify the sass file. This map is the corresponding table of the two files.

Open two files respectively:

As you can see, css is out, and the file is just a relational table, so you don't need to worry about it.

3) monitoring files. We restore the initial state of the folder,

Monitor sass. scss a file sass -- watch sass. scss: css \ sass.css. The monitoring will generate the corresponding folder without manual creation. (Note: Only one file can be monitored, that is, sass. scss. If there are other sass files in sasstest, the file cannot be monitored)

The results are the same:

We have restored the initial state of the folder, deleted the generated folder, and tried to monitor the folder command. In fact, more monitoring folders are used.

To monitor folders, the path must return to the upper level of the folder. In this article, it is the desktop.

Now, we will introduce the running process here.

Sass provides four css output formats: nested, expanded, compact, and compressed.

Command syntax:

Nested: The nested (nested) format is the default Sass output format, because its format reflects the CSS style and HTML document structure. Each attribute exclusively uses one row, but the contraction is not fixed. Each rule is based on its nested deep indentation.

Expanded: the expanded (extended) format is more like a handwritten CSS style. Each attribute and rule exclusively uses one row. But the rule does not have any special indentation.

Compact: The compact (compact) format occupies less space than the nested (nested) or expanded (extended) format. This format focuses on selectors, not their attributes. Each CSS rule exclusively uses one row. This row also includes each defined attribute. The nested rules start with another line. A non-nested selector outputs blank lines as separators.

Compressed: the compressed format occupies as little space as possible. There will be a line break at the end of the file, and there is basically no extra space except the necessary separator selector, it also includes other small compression methods, such as selecting the least-colored representation. This means poor readability.

Sass Syntax:

Time is limited. I will post the syntax code I used in my exercises:

 

@ Charset "UTF-8";/** CSS extension * // * nested Rule */# main {width: 100px; p, div {font-size: 2em; a {font-weight: bold ;}}/ * Reference parent selector */a {text-decoration: none; font-weight: lighter; &: hover {text-decoration: underline; font-weight: bolder;} body. firefox & {color: red ;}# main {color: red; a {font-size: 20px; &: hover {color: blue ;}}} /* nested attributes */. fun {font: {family: ""; size: 16px; weight: bolder;}/* placeholder selector: % foo Sass supported A special type of selector called "placeholder selector"] (placeholder selector ). These look like the class and id selector, except for # Or. Replace with %. They need to use the @ extend Command; * // ** Sassscript * // * Interactive shell * // * Interactive Shell can test the SassScript function in the command line. Enter sass-I in the command line, and then enter the SassScript you want to test to view the output result: sass-I> "Hello, Sassy World! "" Hello, Sassy World! "> 1px + 1px + 1px3px> #777 + #777 # eeeeee> #777 + # 888white * // * variable: variables are only available within the range of its defined selector nesting level (Yuen wharf Note: it can be understood as block-level scope ). Variables not defined in any nested selector can be used anywhere (Yuen wharf Note: it can be understood as global variables ). You can include variables when defining them! Global flag. In this case, the variables can be seen anywhere (Yuen wharf Note: can be understood as global variables) */# bod {$ width: 100px! Global; width: $ width; }# ref {width: $ width;}/* Data Type: sassScript supports seven main data types: Numbers, text strings, colors, Boolean values, null values, list, maps */@ mixin firefox-message ($ select) {body # {$ select}: before {color: red; content: "hi" ;}}@ include firefox-message (". header ");/* interpolation */$ name: son; $ color: blue; p. # {$ name} {color: # {color};}/* & in SassScript, just as it is used in the selector, & in SassScript points to the current parent selector. The following is a comma-separated list that contains a space to separate the list */@ mixin does-parent-exist {@ if & {: hover {color: red ;}@ else {a {color: red ;}}@ include does-parent-exist;/* default variable :! If default is added after the value assigned to the variable! The default flag, which means that if the variable has been assigned a value, it will not be re-assigned. However, if it has not been assigned a value, it will be assigned a new value. */$ Content: "Second content? "! Default; $ content: "First content"; $ new_content: "First time reference "! Default; # main {content: $ content; new-content: $ new_content;}/* @ media */. silder {width: 300px; @ media screen and (max-width: 500px) {width: 500px ;}}$ media: screen; $ feature: -webkit-min-device-pixel-ratio; $ value: 1.5; @ media # {$ media} and ($ feature: $ value ){. sidebar {width: 500px ;}/ * @ extend */. error {border: 1px # f00; background-color: # fdd ;}. seriousError {@ extend. error; border-width: 3px ;} # Fake-links. link {@ extend. class; font-size: 18px;}. class {color: blue; &: hover {color: red;}/* @ extend-Only selector placeholder selector looks like a common class and id selector, just # Or. replaced with %. It can be used as a class or id selector, and its own rules will not be compiled into the CSS file, as follows */# context a % extreme {color: blue; font-weight: bold; font-size: 2em;}/* placeholder selector, which can be used for extension just like the class and id selector. Extends the selector and translates it into CSS. The placeholder selector itself is not compiled. Example: */. notice {@ extend % extreme ;}/*! Optional flag: it is mainly used to prevent expansion without a selector. */a. important {@ extend. noticeqq! Optional;}/*** control command and expression ** // * @ if syntax */$ type: monster; p {@ if $ type = ocean {color: red ;}@ else if $ type == matator {color: blue ;}@ else if $ type == monster {color: green ;}@ else {color: black ;}} /* @ for syntax * // * @ for command repeatedly outputs a set of styles. For each repetition, the counter variable is used to adjust the output result. This command can be run in two forms: @ for $ var from <start> through <end> and @ for $ var from <start> to <end>. Note the difference between the key word through and. $ Var can be any variable name, such as $ I; <start> and <end> are SassScript expressions that should return integers. When <start> is greater than <end>, the counter is decreased rather than incremental. The @ for statement sets $ var as the continuous value in the specified range and uses the value of $ var in each nested style output. For from... through, the range includes <start> and <end> values, but from... to, but does not include the value of <end>. */@ For $ I from 1 through 3 {. item-# {$ I} {width: 2em * $ I ;}@for $ I from 5 to 3 {. item-# {$ I} {width: 2em * $ I;}/* @ each command is usually in the format of @ each $ var in <list or map>. $ Var can be any variable name, such as $ length or $ name, and <list or map> is a SassScript expression that returns a list or map. @ Each rules: Set $ var to list or every item in map. The output style contains the value of $ var */@ each $ animal in puma, sea-slug, egret, salamander {. # {$ animal}-icon {background-image: url ('/images must be named animal#.png');}/* multiple values */@ each $ animal, $ color, $ cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move ){. # {$ animal}-icon {background-image: url ('/images/custom images Using animal#.png'); border: 2px solid $ color; cursor: $ curso R ;}@ each $ header, $ size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$ header }{ font-size: $ size ;}/ * @ while command repeatedly outputs nested styles until the SassScript expression returns false. This can be used to implement a more complex loop than the @ for statement */$ I: 6; @ while $ I> 0 {. item-# {$ I} {width: 2em * $ I;} $ I: $ I-2;}/*** mixed command ** // * mixed (mixin) allows you to define styles that can be repeatedly used in the whole style table, avoiding the use of non-semantic classes, such. float-left. Mixin can also contain all CSS rules and anything else that is allowed in the Sass document. They can even bring arguments and introduce variables. They can output a variety of styles with only a small amount of mixed-in code. * // * 1. Define a mix (mixin): @ mixin */@ mixin large-text {font: {family: Arial; size: 20px; weight: bold ;} color: # ff0000;}/* 2. Introduce the mixed style: @ include */. page-title {@ include large-text; padding: 4px; margin-top: 10px;}/* mixed (mixin) can also be contained outside of any rule (I .e, in the root of the document), as long as they do not directly define any attributes or reference */@ mixin silly-links {a {color: blue; background-color: red ;}@ include silly-links;/* with parameters */@ mixin sexy-border ($ color, $ width: 1in) {border: {color: $ color; width: $ width; style: dashed;} p {@ include sexy-border (blue);} h1 {@ include sexy-border (blue, 2in );}

The following is an example of creating a button style:

.button-narmol{    position: relative;    margin-left: auto;    margin-right: auto;    box-sizing: border-box;    text-align: center;    text-decoration: none;    color: #FFFFFF;    border-radius: 3px;    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    overflow: hidden;    cursor:pointer;    &:after{        content: " ";        width: 200%;        height: 200%;        position: absolute;        top: 0;        left: 0;        border: 1px solid rgba(0, 0, 0, 0.2);        -webkit-transform: scale(0.5);        transform: scale(0.5);        -webkit-transform-origin: 0 0;        transform-origin: 0 0;        box-sizing: border-box;        border-radius: 10px;    }}@mixin button-style-block($select,$color,$darken){    #{$select}{        display: block;        padding-left: 14px;        padding-right: 14px;        font-size: 16px;        line-height: 2.55555556;        background-color: darken($color,$darken);        @extend .button-narmol;        &:active{            background-color: darken($color,$darken+10%);        }    }}@mixin button-style-inline-block($select,$color,$darken){    #{$select}{        background-color: darken($color,$darken);        display: inline-block;        padding: 0 1.32em;        line-height: 2.3;        font-size: 13px;        @extend .button-narmol;        &:active{            background-color: darken($color,$darken+10%);        }    }}@include button-style-block(".krui-btn_primary",#1AAD19,10%);@include button-style-block(".krui-btn_error",#E64340,0%);@include button-style-inline-block(".krui-btn_primary-small",#1AAD19,0%);

You only need to call it in html.

<! DOCTYPE html> 
 
During work, I spent a lot of time writing this article, hoping to be useful to everyone. In addition, please respect originality and repost the source. ------- Blog garden. I am a water fish
Sass documents: http://www.css88.com/doc/sass/