SASS简单总结

最新推荐文章于 2024-10-14 16:16:09 发布

濯茶的前端思考

最新推荐文章于 2024-10-14 16:16:09 发布

阅读量2.6k

点赞数

分类专栏：前端开发文章标签：前端 SASS ruby

本文链接：https://blog.csdn.net/maoxunxing/article/details/38856079

版权

前端开发专栏收录该内容

21 篇文章 0 订阅

订阅专栏

参考：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

一、介绍篇

SASS是一个前端工具，它定义了css的一种新的写法，让写css更加简单:符合SASS语法的css都放在.scss为后缀的文件中，然后通过命令将SASS语法的css编译为传统的css。

二、安装篇

首先要安装SASS，因为SASS是Ruby语言写的，windows平台下要安装 RubyInstaller 。

然后打开命令行：输入

gem install sass

三、语法篇

①内嵌规则

   
   
    
    
     
     //sass写法
    
    
    
    
     
     #main p{
    
    
    
    
     
         color:#eee;
    
    
    
    
     
         .redbox{
    
    
    
    
     
             color:#000000
    
    
    
    
     
         }
    
    
    
    
     
     }
    
    
    
    
     
     
    
    
    
    
     
     //编译后
    
    
    
    
     
     #main p{
    
    
    
    
     
     	color:#eee;
    
    
    
    
     
     }
    
    
    
    
     
     #main p .redbox{
    
    
    
    
     
     	color:#000000
    
    
    
    
     
     }

②引用父类

   
   
    
    
     
     //SASS写法
    
    
    
    
     
     a{
    
    
    
    
     
       background:black;
    
    
    
    
     
       &:hover{background:red;}
    
    
    
    
     
     }
    
    
    
    
     
     //编译后
    
    
    
    
     
     a{
    
    
    
    
     
       background:black;
    
    
    
    
     
     }
    
    
    
    
     
     a:hover{background:red;}

③内嵌属性

   
   
    
    
     
     //SASS语法
    
    
    
    
     
     .funy{
    
    
    
    
     
       font:{
    
    
    
    
     
         family:fantasy;
    
    
    
    
     
         size:30em;
    
    
    
    
     
         weight:bold;
    
    
    
    
     
       }
    
    
    
    
     
     }
    
    
    
    
     
     //编译后
    
    
    
    
     
     .funy{
    
    
    
    
     
        font-family:fantasy;
    
    
    
    
     
        font-size:30em;
    
    
    
    
     
        font-weight:bold;
    
    
    
    
     
     }