Sass基础教程最基本部分

Posted soup227

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass基础教程最基本部分相关的知识,希望对你有一定的参考价值。

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)嵌套 (nested rules)混合 (mixins)导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

  • 变量申明    
$nav-color: #F90;
  • 变量引用
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}
  • 嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
  • 混合器
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//最终生成 .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
  • 继承
.disabled {
  color: gray;
  @extend a;
}

  

 


以上是关于Sass基础教程最基本部分的主要内容,如果未能解决你的问题,请参考以下文章

Sass 基础教程——基本介绍

Sass 基础教程——基本介绍

Sass 基础教程——基本介绍

Sass 基础教程——预处理器

Sass 基础教程——预处理器

Sass 基础教程——预处理器