zoukankan      html  css  js  c++  java
  • 【02】SASS与SCSS

    SASS语法
    SASS语法也称之为SASS的缩进语法,其目的是担供一个更简洁的语法。对于一些人来说,更多的是基于于CSS的美学吸引力,用SASS来代替SCSS语法。
    SASS语法和CSS语法不一样,他不是使用大括号{}和分号;来分隔块的样式,它使用的是类似于HAML语法,使用缩进和换行来分块,而不是使用分号来分隔语句。这通常会省去大量的篇幅,也缩小了文件大小。
    每个在SASS中语句,属性声明和选择器必须放在自己的线上。换句话说,选择器和样式的声明不用大括号{}区分,但必须分行书写。
    选择器
        属性:属性值
    同样的,我们有一段CSS代码:
    .container {
        width: 960px;
        margin: 0 auto;
    }
    
     
    其对应的SASS代码如下:
     .container
         960px
        margin: 0 auto
    
     
    在SASS语法中,有多个选择器时,每个选择器必须在一个行,而且用逗号,分隔。简单点说,一个选择器占一行,而且相邻两个选择器之间使用,分开:
    .user #userTab,
    .posts #postTab
        width: 100px
        height:30px
    
     
    我们简单来看一个SCSS、SASS和CSS三者之间语法的对比示例:
    SCSS
    $blue:#3bbfce;              
    $margin:16px;           
    .container{         
        border-color:$blue;    
        color:darken($blue,9%);  
    }                           
    .border {                   
        padding: $margin / 2;    
        margin: $margin / 2;   
        border-color: $blue;  
    }
    
     
    SASS
    $blue:#3bbfce             
    $margin: 16px            
    .container
        border-color:$blue
        color:darken($blue,9%) 
     
    .border
        padding: $margin / 2
        margin: $margin / 2 
        border-color: $blue  
    
     
    编译出来的CSS
    .container {
        border-color: #3bbfce;
        color: #2b9eab;
    }
    .border {
        padding: 8px;
        margin: 8px;
        border-color: #3bbfce;
    }
    
     
    就我个人而言,我推荐使用SCSS,因为它似乎更具可读性。从外表看,SCSS和CSS几乎是一样的。
     

    **

  • 相关阅读:
    [saiku] 系统登录成功后查询Cubes
    216. Combination Sum III
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    211. Add and Search Word
    210. Course Schedule II
    分硬币问题
    开始学习Python
  • 原文地址:https://www.cnblogs.com/moyuling/p/8004913.html
Copyright © 2011-2022 走看看