Home > Developer > Web Develop

CSS preprocessor sass Getting started learning

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

SASS

Called the CSS preprocessor, his basic idea is to use a specialized programming language for page style design, and then compile into a normal CSS file.

The use of SASS

    • Installation
      Sass is written in Ruby, so we need to install Ruby (Ruby installs itself Baidu) before installing SASS, and execute the following command to install:

      gem install sass

    • Use
      Sass is an ordinary text file with a suffix called. Scss. Then, after we have written the file in SASS syntax, we need to compile the. css file to be used by the HTML file (that is, by introducing the HTML file via the link tag), then we can use the command line or the Git tool to enter:

      sass test.scss test.css #假设我们的sass文件名为test

      Here is an example of a specific compilation sass:
      First we build such two files in a folder:. html,. scss

      Then write the code in each of the two files:

      <!-- html --><!DOCTYPE html>

      Then we compile the SCSS code into. CSS code with git, and we get the following three files, one of which is the. css file we need.


      Running HTML will give you the following results.

Sass Grammar Basics

    • Variable
      Sass is the concept of a variable, so the variables begin with $ .

      $blue:red;div{    color:$blue;}

      If the variables need to be embedded in the string, we have to put them in #{} .

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

    • Calculation function
      SASS allows you to use a calculation in your code:

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

    • Nesting
      is our div and tag box can be nested set CSS

      div {　　p {　　　　color:red;　　}}

      Attributes can also be nested: Border-color
      Border must be appended with a colon

      div {　　p {　　　　border: {　　　　　　color: red;　　　　}　　}}

      Within a nested code block, you can use & to refer to the parent element, such as: a:hover Pseudo-class, which can be written as:

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

    • Comments
      Same as CSS file comments/* Comment */.

Cond

CSS preprocessor sass Getting started learning

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More