Learn Sass basic syntax rules [Sass and compass learning notes]

Since the discovery of programmable css syntax Sass and Sass-based css library compass

I feel like c # And I feel like. NET Framework. Everything is designed to improve development efficiency and reduce the threshold for developing large web applications.

When web development trends move towards the web API + Js era, Will compass and Sass become the standard for web development? This must be tested by actual development.

Preprocessing

As web sites become increasingly complex.

First, html is complicated ---- Dynamic Programming Language Solution

Js is complicated --- solutions such as jq and dojo

Css is also complicated now, but css itself has no programming function, so the middleware oriented to css preprocessing has emerged. To compile css like compass and Sass, then, the browser can parse the css through preprocessing, reducing the complexity of building a more powerful web site.

Variable

The variables are similar to those in js and c #. They are used to store things. I am a newbie like me who writes css. It is the most troublesome to modify a lot of height, color, and so on. With the variables, even the most stupid method, writing css is much faster than before.

In sass, the variable identifier is $. Is it the same as jq?

For example

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

After compass preprocessing, the sass css can be parsed normally, and each row has a row number for comparison, at the beginning, I was very worried about how to contact them before and after handling, troubleshoot the BUG, and later found that there was a line number, so convenience.

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

Nesting and scope

In the past, when css was written, the most painful thing was that the default css rule was a row and a row. BUT css exceeded a screen, and I don't know how these css links are...

Now there are {} nesting and scopes, and css is written like a program.

Nana, scope? All the above variables have a specific scope, but they do not know the scope.

Sass nesting and pre-processing css follow the html inheritance and processing rules for css. It looks 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 the case 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;}

The official demo does not explain the scope. This is shown 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

The word "Partials" is really awesome. I used to open a css file with over 1 kb of lines. This cainiao is reading the code in it, just like getting lost in the maze,

The modularization of sass is to place the css that requires Modularization in a separate file starting with the following dashes, for example, _ partial. scss.@ Import: import data.

Css frameworks that do not support modular css are all rogue!

 

Import Module

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

For example, reset the default browser style module.

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

Import is 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 a line number for easy comparison.

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

Function Method in sass -- Mixins

The function has function name parameters. Optional parameters and return values.

All of these are available in sass! I am still reading the book. This is the official demo, which is enough to find that mixins are quite useful.

Define a method

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

Use one method

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

It can be found that the parameters starting with @ mixin and followed by method name parentheses are returned content in the middle,

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

After compass preprocessing, the generated css is as follows:

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

Inheritance

This inheritance is an inheritance rule for sass Code. It is an inheritance rule for non-html parsing and rendering of css. Do not confuse it ..., although the generated code conforms to the css inheritance rules ......

The key word used for inheritance is @ extend, which is easy 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, which is so powerful that it is more convenient in writing width and height.

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

Pre-processed code

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