Front-end css framework SASS usage tutorial, csssass

Source: Internet
Author: User

Front-end css framework SASS usage tutorial (conversion), csssass
1. What is SASS?

 

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

This article summarizes the main usage of SASS. My goal is that, with this article, you do not need to go to the official documentation for routine use.

Ii. Installation and Use

 

2.1 installation

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.

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

  gem install sass

Then, you can use it.

2.2 Use

The SASS file is a common text file, which can directly use the CSS syntax. The file suffix is. scss, which means Sassy CSS.

The following command can display the css code converted from the. scss file on the screen. (Assume the file name is test .)

  sass test.scss

If you want to save the display result as a file, then follow the file name of .css.

  sass test.scss test.css

SASS provides four compilation style options:

* Nested: nested indent css code, which is the default value.

* Expanded: No indented, extended css code.

* Compact: css code in concise format.

* Compressed: the compressed css code.

In the production environment, the last option is generally used.

  sass --style compressed test.sass test.css

You can also let SASS listen to a file or directory. Once the source file changes, the compiled version is automatically generated.

  // watch a file

  sass --watch input.scss:output.css

  // watch a directory

  sass --watch app/sass:public/stylesheets

The SASS official website provides an online converter. You can run the following examples here.

 

III. Basic usage

 

3.1 Variables

SASS allows variables. All variables start with $.

  $blue : #1875e7; 

  div {
   color : $blue;
  }

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

  $side : left;

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

3.2 computing functions

SASS allows expressions in code:

  body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

3.3 nesting

SASS allows selector nesting. For example, the following CSS code:

  div h1 {
    color : red;
  }

Can be written:

  div {
    hi {
      color:red;
    }
  }

Attributes can also be nested. For example, the border-color attribute can be written as follows:

  p {
    border: {
      color: red;
    }
  }

Note: The border must be followed by a colon.

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

  a {
    &:hover { color: #ffb3ff; }
  }

3.4 annotations

SASS has two annotation styles.

The standard CSS comments/* comment */are retained to the compiled files.

Single line comment // comment, which is only stored in the SASS source file and omitted after compilation.

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!
*/

Iv. code reuse

 

4.1 inheritance

SASS allows one selector to inherit from another selector. For example, the existing class1:

  .class1 {
    border: 1px solid #ddd;
  }

To Inherit class1, use the @ extend command:

  .class2 {
    @extend .class1;
    font-size:120%;
  }

4.2 Mixin

Mixin is a bit like a C-language macro (macro). It is a reusable code block.

Use the @ mixin command to define a code block.

  @mixin left {
    float: left;
    margin-left: 10px;
  }

Use the @ include command to call this mixin.

  div {
    @include left;
  }

The power of mixin is that you can specify parameters and default values.

  @mixin left($value: 10px) {
    float: left;
    margin-right: $value;
  }

Add parameters as needed:

  div {
    @include left(20px);
  }

The following is a mixin instance used to generate a browser prefix.

  @mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

You can call it as follows:

  #navbar li { @include rounded(top, left); }

  #footer { @include rounded(top, left, 5px); }

4.3 color functions

SASS provides some built-in color functions to generate a series of colors.

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c

4.4 insert a file

@ Import command, used to insert external files.

  @import "path/filename.scss";

If you insert a. css file, it is equivalent to the css import command.

  @import "foo.css";

5. Advanced usage

 

5.1 condition statements

@ If can be used to determine:

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

The @ else command is also supported:

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

5.2 loop statements

SASS supports the for Loop:

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

The while loop is also supported:

  $i: 6;

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

The each command is similar to:

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

5.3 User-Defined Functions

SASS allows users to write their own functions.

  @function double($n) {
    @return $n * 2;
  }

  #sidebar {
    width: double(5px);
  }

Address: http://www.ruanyifeng.com/blog/2012/06/sass.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.