zoukankan      html  css  js  c++  java
  • Sass的四种编译方式

      Sass环境搭建,详情见另一篇博文 安装Ruby、Sass与Compass

      我们都知道Sass其实有两种,一种是Sass,一种是SCSS。

      Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

    1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
    2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

      今天我要讲的SCSS编译方式是命令编译方式,在命令编译方式中有不同样式风格的输出方法。分别是

    1. 嵌套输出方式 nested
    2. 展开输出方式 expanded  
    3. 紧凑输出方式 compact 
    4. 压缩输出方式 compressed

      

      例如 style.scss文件的代码如下,现要通过以上四种方式来编译: 

    @charset "utf-8";
    #box{
        400px;
        height:400px;
        border:1px solid gray;
        h1{
            font-size:22px;
            color:red;
        }
        p{
            font-size:18px;
            color:green;
        }
    }

     

      

      (1)、nested(嵌套输出)方式: 

      现在要将其编译成style.css文件。

      命令为: sass style.scss:style1.css --style nested 

      编译后代码如下: 

    #box {
       400px;
      height: 400px;
      border: 1px solid gray; }
      #box h1 {
        font-size: 22px;
        color: red; }
      #box p {
        font-size: 18px;
        color: green; }
    

      可以看到代码行间还是有一定的缩进的。

      (2)、expanded(展开输出)方式

      同样是style.scss文件将其编译为style1.css文件。

      命令为: sass style.scss:style1.css --style expanded 

      编译后代码为: 

    #box {
       400px;
      height: 400px;
      border: 1px solid gray;
    }
    #box h1 {
      font-size: 22px;
      color: red;
    }
    #box p {
      font-size: 18px;
      color: green;
    }
    

      可以看出编译后和css的书写规则是一样的。

      (3)、compact(紧凑输出)方式。

      将style.scss文件编译成style2.css文件。

      命令为: sass style.scss:style2.css --style compact 

      编译后结果为:

    #box {  400px; height: 400px; border: 1px solid gray; }
    #box h1 { font-size: 22px; color: red; }
    #box p { font-size: 18px; color: green; }
    

      

      (4)、compressed(压缩输出)方式。

      将style.scss文件编译成style3.css文件。

      命令为: sass style.scss:style3.css --style compressed 

      编译后结果为:

       #box{400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}

  • 相关阅读:
    VMware的安装
    草根创业专题开篇
    转:分布式和集中式版本控制工具svn,git,mercurial
    sql db to sqlite
    简单办公自动化系统开发与思考1
    sql ef datacontext muti thread problem
    谈云计算,服务器运算的惊天骗局
    ios5.1二货,手贱,解决方案
    阿曹的创业点子1人人快递
    创业点子wifi anywhere
  • 原文地址:https://www.cnblogs.com/jf-67/p/7635965.html
Copyright © 2011-2022 走看看