Getting started with sass and getting started with sass

Getting started with sass and getting started with sass

SASS is a CSS development tool that provides a lot of convenient writing methods, greatly saving the designer's time, making CSS development moreSimpleAndMaintenance.

SASS Official Website:

Sass is the most mature (mature), stable (stable), and powerful professional grade CSS extension language in the world.

Official documentation:

Http://sass-lang.com/documentation/file.SASS_REFERENCE.html

The biggest obstacle to sass beginners is the need to build a Ruby runtime environment and use command lines. In fact, this is very simple.

1. Install 1. Install Ruby

SASS is written in Ruby, but its syntax is irrelevant. If you do not understand Ruby, you can still use it. You only need to install Ruby before installing SASS.

To install SASS, please refer to the official website of SASS: http://sass-lang.com/install,install ruby:rubyinstaller.orgunder windows.

Note one point during installation: Check Add Ruby executables to your PATH, Add the Ruby executable PATH to the environment variable, and then install it.

If you enter ruby-v in the Dos window, the version information is displayed.

2. Install sass

Suppose you have installed Ruby, and then enter the following command in the command line: gem install sass

After successful installation, enter sass-v to view the version information.

 

Ii. Use 1. Compile

Note:Note that the suffix of the sass file name is scss rather than sass.

Compile style. scss into css

sass style.scss

Compile style. scss and save it as a css file.

sass style.scss style.css

Compile style. scss and save it as a compressed css file.

sass --style compressed style.scss style.css

-- Style controls the compilation style. The optional parameters are as follows:

• Nested: the css code with nested indentation, which is the default value.
• Expanded: expanded css code without indentation.
• Compact: css code in simple format.
• Compressed: the compressed css code.

Sass listens to files or directories. The source files are changed and automatically compiled.

// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss

2. Syntax 2.1 and comments

Like less, sass has two annotations.

// Single-line comment, not as final output/* multi-line comment, with native CSS/* comment... */form as final output */

Add an exclamation point after/* to indicate that this is an "important comment ". This line of comments will be retained even in Compressed Mode compilation, which can be used to declare copyright information.

/*! Important Notes! */

2.2. Variables

Color, Font, and css values that will be reused in the future are stored as variables to facilitate unified modification and maintenance.

// Define the variable $ primary-color: #333; // call the body variable {color: $ primary-color ;}

If the variable needs to be embedded in a string, it must be written in.

$side : left;.rounded{    border-#{$side}-radius:5px;}

2.3 nesting

Like html Tag nesting, selector nesting writes css, but it has advantages and disadvantages in generating css.

Classic usage.

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

Will generate:

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

Attributes can also be nested. For example, the border-color attribute is as follows. The border must be followed by a colon.

p{   border:{        color:red;    }}

In nested code blocks, you can use & reference parent elements. For example, a: hover pseudo class can be written:

a{    &:hover{color:red;}}

2.4. Less css fragments and introduction

Objective: To facilitate modularization and management, and make small modules easy to maintain. Eventually compiled into a css file, which is better than @ import of pure css.

Disadvantage: One more @ import requires one more http request.

Segment name: _ partial. scss, which is introduced with @ import.

Demo: import _ reset. scss to base. scss.

_ Reset. scss:

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

Base. scss:

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

@ Import 'reset.

2.5. Reuse the mixin code block

You can define reusable code blocks in sass and transmit parameters to facilitate future calls as needed.

Definition: Pass@ Minxin nameYou can define a reuse style.

Call:@ Include name

Demo:

// Mixin @ mixin box ($ H: 30px, $ col: red) {height: $ H; background-color: $ col;} div. box {@ include box; // use the default value} div. box1 {@ include box (50px, blue); // passing parameters}

Compilation result:

div.box {  height: 30px;  background-color: red; }div.box1 {  height: 50px;  background-color: blue; }

Css contains some browser-compatible code and some css 3 private prefixes. It is very convenient to use mixins. The following is a classic example of border-radius.

@mixin border-radius($radius){    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    -ms-border-radius: $radius;          border-radius: $radius;}.box{@include border-radius(10px);}

2.6 inheritance

Inheritance allows the style of one selector to be reused and overwritten by another selector. Is a DRY syntax and one of the most useful sass syntaxes.

Syntax: @ extend Selector

Demo: A series of prompts.

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

Compiled css [inherited and implemented css combination Declaration]

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

2.7. Operators

Including +,-, *, and %.

Demo: Calculate the width of aside and article.

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

Css after compilation

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

2.8, color

Sass integrates a large number of color functions to make color generation easier

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

Demo:

$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

Compile to css

a {  text-decoration: none;  color: #08c; }a:hover {  color: #006699; }

3. Advanced syntax 3.1, Condition

If determines the condition and style.

p{    @if 1+1==2{border:1px solid red;}    @if 5<2 {border:2px dotted red;}}

If and else are used together.

Demo: determines that the brightness in the color is greater than 30%, and sets the background color to black, otherwise it is white.

$color : #1875e7;p{    @if lightness($color)>30%{        background-color:#000;    }@else {        background-color:#fff;    }}

Note:Lightness ($ color): Obtain the brightness value from a color;

3.2 loop statements

For Loop

@for $i from 1 to 10{    .border-#{$i}{        border:#{$i}px solid blue;    }}

Compile and generate the following css

.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }

While Loop

$i : 6;@while $i > 0{    .item-#{$i} {width:2em * $i;}    $i : $i - 2;}

Compile to css

.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }

Each Traversal

@each $member in a,b,c,d{    .#{$member}{        background-image:url("images/#{$member}.jpg");    }}

Compile to css

.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }

3.3 User-Defined Functions

Sass customizable functions.

@function double($n){    @return $n * 2;}#sidebar{    width:double(5px);}

Css after compilation

#sidebar {width: 10px; }

 

Resource Link:

Http://sass-lang.com/guide

Http://www.w3cplus.com/sassguide/

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.