Learn the basic grammar rules of Sass [Sass and compass study notes]_html/css_WEB-ITnose

Since discovering the programmable css syntax Sass and the Sass-based css library compass

One feels like c# to me and the other feels like .NET Framework, everything is different. In order to improve development efficiency and lower the threshold for developing large-scale web.

When the web development trend enters the WebApi Js era, will compass and Sass become the standard for web development? This needs to be tested in actual development.

Preprocessing

When the web site becomes more and more complex.

First, html is complicated----》Dynamic programming language solution

JS is complicated---》JQ and dojo and other solutions

CSS has also changed now It’s complicated, but CSS itself has no programming function, so middleware for CSS preprocessing has emerged. You can write CSS like compass and Sass, and then preprocess it into CSS that the browser can parse, which reduces the cost. It reduces the complexity of building more powerful web sites.

Variables

Variables are similar to the variables in js and c#. They are all used to store things. For a novice like me to write css, the biggest headache is to modify many heights, colors, etc. at once. With variables, even the smallest Stupid method, writing css is much faster than before

The identifier of the variable in sass is $, which is the same identifier as jq

For example,

$font-stack:    Helvetica, sans-serif;$primary-color: #333;body {  font: 100% $font-stack;  color: $primary-color;}

The sass version of css written in this way can be parsed normally after compass preprocessing, and each line will also have a line number for comparison. At first, I was very worried about how to contact before and after processing. Together, we checked for bugs, and later found that there were line numbers, so it was convenient

body {  font: 100% Helvetica, sans-serif;  color: #333;}

Nesting and scope

In the past, the most annoying thing about writing css was that the default rules of css were line by line, and BUT css exceeded one screen. I just can't figure out the relationship between these css. . .

It’s okay now. With {} nesting and scope, write css like a program

Nani, scope? There are variables and scopes above. If you don’t know the scope, the nesting and preprocessed css of

sass in Baidu are based on the inheritance and processing rules of css in html. See It feels much more comfortable than before

nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

This is what it looks like after preprocessing

nav ul {  margin: 0;  padding: 0;  list-style: none;}nav li {  display: inline-block;}nav a {  display: block;  padding: 6px 12px;  text-decoration: none;}

Regarding the scope, the official demo has no explanation. This is what I saw in the book

For example

div{$font-stack:    Helvetica, sans-serif;$primary-color: #333;}li{$font-stack:    Helvetica, sans-serif;$primary-color: #333;}

Variables in different {} scopes do not affect each other

Module

When I saw the word Partials, I really cried with joy. I used to open a css file with more than 1k lines. When this novice looks at the code, it feels like he is lost in a maze.

The modularization of sass is to put the css that needs to be modularized into a separate file starting with an underscore, such as _partial.scss, using Use @import to import this module

CSS frameworks that do not support modular css are just rogues!

Import Import module

Using an Import in css will initiate a request to the server. Using Import and compass in sass can import a module and merge the imported files.

For example, reset The browser default style module

// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

is imported like this

/* base.scss */@import 'reset';body {  font-size: 100% Helvetica, sans-serif;  background-color: #efefef;}

The generated css can be parsed by the browser and has line numbers for easy comparison

html, body, ul, ol {  margin: 0;  padding: 0;}body {  background-color: #efefef;  font-size: 100% Helvetica, sans-serif;}

Functions in sass Method - Mixins

Functions have function name parameters, optional parameters, return values, etc.

All of these are available in sass! Specifically, I am still reading, this is the official demo, which is enough to discover that mixins are It’s very easy to use

Define a method

@mixin border-radius($radius) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;          border-radius: $radius;}

Using a method

.box { @include border-radius(10px); }

you can find that it starts with @mixin followed by the method name and the parameters in parentheses, and the return content in the middle of {},

Use @include followed by the method name and parentheses to call this method

The css generated after compass preprocessing is as follows

.box {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  border-radius: 10px;}

Inheritance

This inheritance is the inheritance of Sass organization code Rules, inheritance rules when non-html parsing and rendering css, don't get confused. . . , although the generated code complies with CSS inheritance rules. . . . . .

The keyword used for inheritance is @extend. It is very simple to use. Let’s take a look at an official demo

.message {  border: 1px solid #ccc;  padding: 10px;  color: #333;}.success {  @extend .message;  border-color: green;}.error {  @extend .message;  border-color: red;}.warning {  @extend .message;  border-color: yellow;}

Code generated after preprocessing

.message, .success, .error, .warning {  border: 1px solid #cccccc;  padding: 10px;  color: #333;}.success {  border-color: green;}.error {  border-color: red;}.warning {  border-color: yellow;}

Operator

Sass supports, -, *, /, % addition, subtraction, multiplication, division and remainder are so exciting. This makes it more convenient to write width, height, etc.

Check out the official demo

.container { width: 100%; }article[role="main"] {  float: left;  width: 600px / 960px * 100%;}aside[role="complimentary"] {  float: right;  width: 300px / 960px * 100%;}

Preprocessed code

.container {  width: 100%;}article[role="main"] {  float: left;  width: 62.5%;}aside[role="complimentary"] {  float: right;  width: 31.25%;}