Sass 写法示例

CSS 本身是非常强大的,但随着样式表变大,变复杂,维护 CSS 变得越来越难。这时候预处理就有用了。Sass 是一种预处理,它能让你使用一些 CSS 中没有的特性,比如:变量,嵌套(nesting),混入(mixins),继承等。这些特性能让 CSS 变的容易维护。更多描述见官网

想尝试下 Sass ,可以尝试下在线编译,点这里

指定编码格式

如果 Sass 文件中有中文,代码第一行必须加如下代码来指定编码格式,否则会报错。

@charset 'utf-8';// 不加这行,文件中有中文时会报错

注释

// 表示单行注释,不会输出在 CSS 中。 /* */ 表示多行注释,会输出在 CSS 中。

// 我是单行注释
/*
  @author: Joel
  @describe Sass syntax overview
*/

变量

变量必须以 $ 做为开头。

body {
  $primary-color: #333; // 定义变量。作用域为括号。
  color: $primary-color; // 使用变量
  $base-line: 2px;
  $base-line: 1px !default;
  $base-line;// 2px。 !default 定义的变量不会覆盖前面定义的同名变量。
  $gloable-red-color: #f00 !global; // 全局变量
}
// $primary-color;//报错:Undefined variable: "$primary-color"
$gloable-red-color; // #f00

数据类型

Sass 支持字符串,数字,颜色,数组,Map 这几种数据类型。

// 字符串
$str: 'str1' + 'str2';
@debug $str;

// 数字
4 + 5;// 9
5px + 2px;// 7px
5px - 2px;// 3px
10px * 2; // 20px
10px * 2px; // 报错
10px / 2;// 10px / 2。注意。
10px / 2px;// 10px / 2px。注意。
'5' == 5; // false
'5' != 5; // true
5px == 5; // true

$width: 10px;
$width / 2;// 5px
$width / 2px;// 5


// 数组。
// 数组的元素可以由空格或逗号分割。
$list: 10px 20px 10px;
nth($list, 2); // 20px。取列表中的第 n 个元素,下标从 1 开始。
$list2: 10,30,50;
list-separator($list2);//comma(逗号)。 数组的分隔符。

// 颜色
$orange: #f60; 
red($orange); // 255。$orange 红色部分的值

// Map
$map: ('name': 'joel', 'gender': 'male');
map-get($map, 'name'); // 'joel'
map-get($map, 'gender'); // 'male'

引入 Sass 或 Scss 文件

@import 'reset';// 等效于 @import 'reset.scss';如果找不到 reset.scss 也会找_reset.scss

逻辑操作符

$true: true;
$false: false;

not $true;// false
$true and $false; // false
$true or $false; // true

条件语句

$isCool: true;
@if $isCool {
  .isCool{
    color: #fff;
  }
}

@if not $isCool {
} @else {
   .notCool{
    color: #000;
  }
}

循环

$map: ('a': #f00, 'b': #0f0, 'c': #00f);
@each $key, $value in $map {
  .section-#{$key} {
    background-color: $value;
  }
}

函数

@function add($a, $b){
  @return $a + $b;
}
add(1, 2);// 3

// 参数的默认值
@function greet($greet: 'Hello', $name: 'Nobody') {
  @return $greet + ',I am ' + $name;
}
greet();// Hello,I am Nobody
greet(Hi, Joel);// Hi,I am Joel

嵌套

嵌套规则

.box {
  .title {// 相当于 .box .title
    font-size: 18px;
    padding-left: 10px;
  }
  .content {
    padding: 10px;
    .pager {
      text-align: center;
    }
  }
  // &表示外层的元素
  &:hover { // 相当于 .box:hover
    outline: 1px solid #ddd;
  }
}

嵌套属性

.font {
  font: {
    weight: bold;// 相当于 font-bold
    size: 14px;
  }
}

输出

.font {
  font-weight: bold;
  font-size: 14px;
}

混入(Mixins)

// 定义
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.wrap {
  @include clearfix;// 使用
}

// 带参数
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

.block1{
  @include size(100px);
}

.block2{
  @include size(100px, 200px);
}

扩展

扩展和混入比较类似,不同点是,扩展不支持参数。

.message {
  border: 1px solid #ccc;
  padding: 10px;
}

%border-box {
  box-sizing: border-box;
}

.success {
  @extend %border-box;
  @extend .message;
  border-color: #0f0;
}

.error {
  @extend %border-box;
  @extend .message;
  border-color: #00f;
}

插值

如果想要在选择器或属性上用变量,必须使用插值,否则会报错。

$sel: '.a';
$attr: width;
#{$sel}{
  color: #f00;
  #{$attr}: 100px;
}

在命令行输出信息

@debug xxx

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

vue.js笔记——指令

vue.js笔记——指令 跟ng的指令系统类似,vue也拥有一套指令系统。 所谓指令,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 D...

2209
来自专栏Golang语言社区

Golang中container/list包中的坑

但是list包中大部分对于e *Element进行操作的元素都可能会导致程序崩溃,其根本原因是e是一个Element类型的指针,当然其也可能为nil,但是gol...

4419
来自专栏源哥的专栏

给textarea增加长度的限制

给textarea增加长度的限制     我们知道文本框可以有一个为maxlength的属性,可以限制文本框的长度,当时备注框textarea却没有,那么 要怎...

932
来自专栏Golang语言社区

Golang中container/list包中的坑

但是list包中大部分对于e *Element进行操作的元素都可能会导致程序崩溃,其根本原因是e是一个Element类型的指针,当然其也可能为nil,但是gol...

38114
来自专栏用户画像

H5中的标记方法

要使用H5标记,必须先进行如下的doctype声明,不区分大小写。Web浏览器通过判断文件开头有没有这个声明,来判断解析器和渲染类型是否切换到对应的H5模式。

811
来自专栏小狼的世界

JavaScript 去除空格函数

return strToTrim.replace(/^\s+|\s+$/g,"")

1253
来自专栏HTML5学堂

2015.12.24 HTML5真题练习

HTML5学堂:各位,圣诞快乐~!!!每天一道题,强壮程序员!今日主要涉及12.23日关于逗号运算符和for循环知识的题目解答,以及一道涉及逗号运算符的题目。 ...

2795
来自专栏十月梦想

ES6函数res参数和ES5函数参数(arguments)

在JavaScript ES5中我们可以使用arguments对象获取参数的所有

2641
来自专栏柠檬先生

Sass 基础(四)

当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器。       @mixin generate-sizes($class,$s...

2457
来自专栏我的小碗汤

Go语言常见坑

这里列举的Go语言常见坑都是符合Go语言语法的, 可以正常的编译, 但是可能是运行结果错误, 或者是有资源泄漏的风险。

723

扫码关注云+社区

领取腾讯云代金券