sass入门初体验

aisuhua 发布于2019-08-30 13:16 / 1471人阅读

摘要：接上文入门初体验，接下来讲讲，有两种文件后缀名，一种是，另一种是。

接上文less入门初体验，接下来讲讲sass，sass有两种文件后缀名，一种是.sass，另一种是.scss。前者类似于ruby的语法规则，没有花括号，没有分号，具有严格的缩进；而后者更贴近于css的语法规则，易于阅读，更具语义性，所以本文采用.scss后缀名来编写sass代码

编译

1、Ruby:
sass是由Ruby语言编写的，所以我们可以通过Ruby来编辑sass代码，首先需要安装ruby，然后再安装sass，之后通过sass命令编译文件

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四个编译风格的选项:

nested：嵌套缩进的css代码，默认值
expanded：没有缩进的、扩展的css代码
compact：简洁格式的css代码
compressed：压缩后的css代码

生产环境中一般使用最后一个

sass --style compressed style.scss style.css

变量

变量使用以$开头(这也是我喜爱sass多于less的原因，谁不喜欢money呢？O(∩_∩)O哈哈~，开个玩笑)，如果变量需要在字符串中使用，只需要写在#{}中即可

$color:#999;
$side:left;
$bw:2px;
div {
    background-color: $color;
    border-#{$side}-width: $bw;
}

编译后:

div {
    background-color: #999;
    border-left-width: 2px;
}

Mixin(混合)

实现代码块的重用，使用@mixin定义一个代码块，通过@include就可以调用此代码块

@mixin b_r($radius:5px){
    -webkit-border-radius:$radius;
    -mz-border-radius:$radius;
    border-radius:$radius;
}
div1{
    @include b_r();
}
div2{
    @include b_r(10px);
}

编译后:

div1 {
    -webkit-border-radius: 5px;
    -mz-border-radius: 5px;
    border-radius: 5px;
}

div2 {
    -webkit-border-radius: 10px;
    -mz-border-radius: 10px;
    border-radius: 10px;
}

嵌套

与less类似，不多介绍

div {
    background-color: #333;
    a {
        text-decoration: none;
        &:hover {
            color: red;
        }
    }
}

编译后:

div {
    background-color: #333;
}
div a {
    text-decoration: none;
}
div a:hover {
    color: red;
}

运算

与less类似，不多介绍

$w:1000px;
body {
    width: $w/2;
    div {
        height: 100px*5;
    }
}

编译后:

body {
    width: 500px;
}
body div {
    height: 500px;
}

颜色函数

div {
    color: lighten(#ccc, 10%);
    background-color: darken(#999, 10%);
}

编译后:

div {
    color: #e6e6e6;
    background-color: gray;
}

注释

/* Hello Sass 我依然在这里 */
div1 {
    color: red;
}

// Hello Sass 我不见了
div2 {
    color: green;
}

/*!  Hello Sass 即使压缩了，我依然还在  */
div3 {
    color: blue;
}

编译后:

@charset "UTF-8";
/* Hello Sass 我依然在这里 */
div1 {
  color: red;
}

div2 {
  color: green;
}

/*!  Hello Sass 即使压缩了，我依然还在  */
div3 {
  color: blue;
}

云服务器 GPU云服务器初体验阿里云香港服务器初入门 sass 多云管理 sass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115437.html

less入门初体验

摘要：有众多的预处理器，其中比较流行的三个是，本文就一起来体验编写代码官方文档官网栗子编译成文件编译客户端浏览器通过在源代码中引入文件，用于实时对样式表文件进行编译并不推荐注意你的样式文件一定要在引入前先引入，并且需要 css有众多的预处理器，其中比较流行的三个是less、sass、stylus，本文就一起来体验less编写css代码官方文档:http://lesscss.org/官网栗子:...

chinafgj 2019-08-30 13:17 评论0 收藏0
webpack+react项目初体验——记录我的webpack环境配置

摘要：安装写在里安装和配置和之前一样用来处理文件相关的这个包括的就比较多，有，后面两个是为了写和服务。这两天学习了一些webpack的知识，loaders+plugins真的很强大！不过配置起来也很复杂，看了一些文章，自己也写了项目练手，写下来加深自己的印象。首先，非常非常推荐的几篇文章，初学者一定要看！http://www.jianshu.com/p/42e1...（标题一点也不夸张，...

csRyan 2019-08-20 14:05 评论0 收藏0
常见的CSS预处理器之Less初体验

摘要：预处理器的技术现在已经很成熟了，而且也出现了各种不同的预处理器语言，但是呢不可能一一列出，面面俱到，这篇文章呢，主要是介绍一下比较常见的预处理器语言之一之初体验。 CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。简单来说，CSS预处理器用一种专门的编程语言，进行We...

desdik 2019-08-30 11:11 评论0 收藏0
vue-cli3.0初体验～

摘要：比如传递给时，使用。为所有的及其预处理文件开启。在生产环境下为和使用在多核机器下会默认开启。是否使用分割供应的包也可以是一个在包中引入的依赖的显性的数组。查阅配置行为。之前因为parcel的出现，webpack也跟进了零配置vue-cli自然也不能落下,cli3.0也升级到webpack4，并增加许多新特性安装并创建一个项目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 评论0 收藏0