文档章节

常见的CSS预处理器之Sass初体验

凌兮洛
 凌兮洛
发布于 06/18 14:49
字数 1442
阅读 4
收藏 0

Sass

Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。

Sass是一个将脚本解析成CSS的脚本语言,即SassScript,它包括两套语法。最开始的语法叫“缩进语法”,使用缩进来区分代码块并且用回车将不同规则隔开;而较新的语法叫做“SCSS”,使用CSS一样的语法块也就是大括号将不同规则分开,用分号将具体样式分开。通常情况下这两套语法是通过.sass 和 .scss 两个文件扩展名来区分的。

对于Sass的基本使用,我们需要从嵌套、变量、函数、继承和高阶属性这几方面来一一了解。

1 环境的布置

2 Sass 和 SCSS

  • SCSS是sass的一个升级版本,前者完全兼容后者
  • Sass是靠缩进表示嵌套关系,SCSS是花括号

具体语法上面的差异

SCSS语法:

$width: 100%;
$height: 100px;
$color: red;
.container{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}
.container2{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}
.container3{
  width: $width;
  height: $height;
  background-color: $color;
  margin-bottom: 5px;
}

Sass 语法:

!primary-color= hotpink
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius
.my-element
    color= !primary-color
    width= 100%
    overflow= hidden
.my-other-element
    +border-radius(5px)

3 编译 .scss 文件

    sass main.scss main.css

Sass 编译语法和 Less编译语法有一定的相似性;不同的是Sass实际上是支持编译风格的以及文件侦听。

我们加上一个 -- style 的属性就可以指定编译风格,它的编译风格一共有四种:

    sass --style compressed main.sass main.css
  • nested 嵌套缩进的css代码
  • expanded 没有缩进
  • compact 简洁格式
  • compressed 压缩

文件侦听的意思就是说我们监听的某一个文件它有变动的时候,然后我们在保存的时候会自动把它编译成对应的css。

    监听文件
    sass --watch main.scss:main.css
    监听文件夹
    sass --watch xxxx/sass:xxxxx/xxxxx

4 Sass基本语法

Sass嵌套

  • Sass 写法
    .container {
        padding: 0;
        .header {
            background-color: red;
        }
    }
    
  • 伪类写法
    #header {
      &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }
    
    Sass的嵌套相较于Less有一个不同的地方在于,在伪类中可以实现一个属性的嵌套,比如在Sass中下面样式: p { border: { color: red; } } 在css中编译出来的是: p{ border-color:red; }

Sass 变量

sass的变量与less比较有一定的不同,在less中是以@ 符号开头的,而在sass中则是$ 美元符号,其他部分没有区别。

  • sass 也是用 js 的写法来写 css
  • 使用 $ 符号定义变量
  • $变量名 看成是一个字符串
    $width: 100%;
    $height: 100px;
    $color: blue;
    $direction: left;
    .border {
      border-#{$direction}: solid 5px;
    }
    

Sass 函数

在sass中函数要加上一个@function

[@function](https://my.oschina.net/u/569418) double($x, $y, $z) {
  [@return](https://my.oschina.net/u/556800) $x * $y * $z;
}
#header{
  width: double(5, 5, 5px);
}

编译成css:
#header{
	width:125px;
}

内置函数

  • unquote 去引号

  • percentage 百分比

  • index 计算位置 .header { width: index(1px solid red, 1px); }

    编译成css:
    .header{
        width:1px;
    }
    
  • mix 混合颜色 mix (color, color, ratio);

  • lightness 获取亮度值

Sass 注释 ``` // 普通注释 // 只在源文件出现,编译之后就不存在了

/*
* 注释
*  compressed的style的css中没有
*/

/*!
* 重要注释
*  任何style的css文件中都会有,即使编译混淆,注释仍然存在
*/
```

Sass 计算属性

    body {
      margin: (14px/2);
      top: 50px + 100px;
      right: $var * 10%;
    }

Sass 继承

  • extend
      .header {
        border: 1px solid #ddd;
      }
      .body {
        @extend .header;
      }
    
      编译后的css:
      .header,body{
          border:1px solid #ddd;
      }
    
  • mixin
       @mixin common {
         background-color: red;
       }
       .header{
         font-size: 16px;
         @include common;
       }
       编译后的css:
       .header{
           font-size:16px;
           background-color:red;
       }
    
    我们也可以向JS更进一步,把mixin写成一个函数,再加一个默认值:
    	 @mixin default($x, $y, $z: 12px){
       margin-left: $x;
       margin-right: $y;
       margin-top: $z;
     }
     .header {
       @include default(5px, 5px);
     }
    
     编译后的css:
     .header {
       margin-left: 5px;
       margin-right: 5px;
       margin-top: 12px; 
     }
    

Sass 引入

Sass的引入和Less是一样的,都是加上一个@import “.scss文件名”。

进阶属性

  • @(运算)

     .header {
       @if 10 == 10 { color: red; }
       @if 10 < 20 { color: red; }
     }
    
  • else颜色值比较以突出文字

      .header {
       @if 10 == 11 { color: red; }
       @else  { color: green; }
     }
    
  • 循环(分为三个) 1 for 2 while 3 ench

    @for $index 变量从一到一百,把1.jpg到100.jpg生成100个不同的背景颜色:

       @for $index from 1 to 100 {
       .background-#{$index} {
           background-image: url("/image/#{$index}.jpg");
       }
     }
    

    while 打印四个数,定义了一个变量为20px,依次4次输出结果:

    	  $types: 4;
     $type-width: 20px;
     @while $types > 0 {
       .while-#{$types}{
       width: $type-width + $types;
     }
       $types: $types - 1;
     }
    

    each 遍历三种颜色:

    	  @each $item in red, green, yellow {
       .#{$item} {
         color: $item;
       }
     }
    

Sass 优势和劣势

优点

  • 扩展了CSS3,增加了规则、变量、混入、选择器、继承等属性
  • Sass生成良好的格式化CSS代码
  • 易于组织和维护
  • Sass生态环境完善
  • Sass功能上较强于Less
  • Sass有丰富的sass库:Compass/Bourbon

缺点

  • 不能在浏览器中运行

© 著作权归作者所有

凌兮洛
粉丝 2
博文 47
码字总数 55604
作品 0
长沙
私信 提问
初接触 Sass 与Compass 遇到的几个坑

最近开始接触传说中高大上的CSS 预处理器之一Sass 以及Compass ,本文不会对Sass 与Compass 技术层面做过多介绍,只是记录自己折腾过程中遇到的几个坑。 前言 Jeff 本身也是刚接触Sass,因此...

Billydotzhang
2016/11/15
25
0
为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

红薯
2012/03/13
144.5K
58
为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

彭博
2012/11/27
1K
0
8 个 CSS 预处理器用以加速开发速度

CSS 可以让你做很多事情,但对开发者来说,缺乏很多特性,例如变量、常量以及一些编程语法。本文介绍 8 个 CSS 预处理器,可以加速你的 CSS 开发。 Less CSS Less CSS 是一个使用广泛的 CSS ...

红薯
2011/11/01
4.1K
5
您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。 首先我们来简单介绍下...

黄金林
2016/12/20
95
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
13
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部