sass AND compass

SASS

  • 配置环境
    sass是基于Ruby;
    安装Ruby,在命令行输入以下命令
    gem install sass
  • 编译

SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。

  • 基本语法
  • 变量
//sass允许使用变量,所有变量以$开头。
  $operator : #1875e7; 
  div {
   color : $operator;
  }
      $side : left;
//如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
  .rounded {
    border-#{$side}-radius: 5px;
  }
  • 计算功能
$var : 1;
 body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }
  • 嵌套
//SASS允许选择器嵌套。比如,下面的CSS代码:
  div h1 {
    color : red;
  }
//可以写成:
  div {
    hi {
      color:red;
    }
  }
//属性也可以嵌套,比如border-color属性,可以写成:
  p {
    border: {
      color: red;
    }
  }
//注意,border后面必须加上冒号。
//在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
  a {
    &:hover { color: #ffb3ff; }
  }
  • 注释
    同javascript
  • 代码的重用
  • 继承
.exception{
              border:1px #000 solid;
}
.operator{
              @extend .exception;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容