前端菜鸟之SASS入门笔记

王小婷

发布于 2018-12-19 16:46:50

5720

发布于 2018-12-19 16:46:50

文章被收录于专栏：编程微刊

Sass 是成熟、稳定、强大的 CSS 扩展语言。sass是需要编译的，sass不能直接用于页面。它可以提高编程效率（对于使用熟练的人来说）。

sass想要应用在项目中需要编译成css文件。用考拉！

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

参考链接：

Sass中文网：https://www.sass.hk/ 中文文档：http://sass.bootcss.com/

一、变量

sass中可以定义变量，可以统一维护。sass定义变量用$开头

$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}

//编译成css style//-----------------------------------body {
  font-family: Helvetica, sans-serif;
  color: #333;

复杂变量的使用

//sass style//-------------------------------
$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style//-------------------------------a{
  color:#08c;
}
a:hover{
  color:#333;
}

二、嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很有bigger整齐。

/sass style//-----------------------------------nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//css style//-----------------------------------nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

三、mixin（混合）

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass style//-----------------------------------@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

//css style//-----------------------------------.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

四、扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style//-----------------------------------.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

//css style//-----------------------------------.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

颜色

sass中集成了大量的颜色函数，让变换颜色更加简单。

//sass style//-----------------------------------
$linkColor: #08c;a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

//css style//-----------------------------------a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.11.27 ，如有侵权请联系 cloudcommunity@tencent.com 删除

sass

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

sass

登录后参与评论

0 条评论

热度