SASS入门

edagarli 发布于2019-08-30 12:49 / 444人阅读

摘要：阮一峰用法指南简单入门结一语法较为详细安装可用一键安装下载有点慢，记得把第二个给选了安装完成后记得重启使用查看是否安装成功。安装在中输入关于与文件这两种的区别在于文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。

阮一峰(简单入门)
结一(较为详细)

1.安装Ruby

windows可用RubyInstaller一键安装
RubyInstaller 下载有点慢，be patient！

记得把第二个给选了

安装完成后记得重启cmd,使用ruby -v 查看是否安装成功。

2.安装sass

在cmd中输入gem install sass

3.关于sass与scss文件

这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。原文地址

个人认为sass虽然比较简洁，但是并不符合大多数语言的编码习惯，而scss和css比较像，可读性较高，因此选择scss

scss:

.a {  
  color: blue;  
  font-weight: bold;  
  text-decoration: underline;  
  .b {  
      color:black;  
  }  
}

sass:

.div  
   color: blue  
   .b  
      color: black  
      font-weight: bold  
      text-decoration: none  
   .c  
      color: white

4.基本语法

创建一个scss文件， test.scss

变量：

$bule: #1875e7;
$size: 10px !default;
.blue-font{
    color: $blue;
    font-size: $size;
}
.blue-font{
    font-size:15px;
}

字符串：

$side: left;
.rounded{
    border-#{$side}-radius: 5px;
}

计算：

$twopx: 2px;;
.left-4px{
    margin-left: $twopx * 2;
}

嵌套(border后有：)：

.nest{
    h1{
        color:red;
        border:{
            width: 1px;
            color: red;
            style: solid;
        }
    }
}

嵌套中&表示父元素：

a {
    &:hover { color: #ffb3ff; }
}

注释：

//这种注释编译后不会保留
/* 这是重要注释，编译后会保留 */

继承：

.extend1 {
    border: 1px solid #ffffd;
}
.extend2 {
    @extend .extend1;
    font-size:120%;
}

Mixin:

@mixin mixin-left($value: 10px) {
    float: left;
    margin-right: $value;
}

.include-div {
    @include mixin-left(20px);
}

颜色函数：

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

插入文件：

@import "path/filename.scss";
@import "foo.css";

5.高级语法

判断：

$value: 3;
.judge-p {
    @if $value == 3 {
        background-color: #000;
    } @else {
        background-color: #fff;
    }
}

循环：

for：

@for $i from 1 to 10 {
    .border-#{$i} {
    　border: #{$i}px solid blue;
　}
}

while:

$wi: 6;
@while $wi > 0 {
    .item-#{$wi} { width: 2em * $wi; }
  $wi: $wi - 2;
}

each:

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

自定义函数：

@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

6. 编译

打开cmd, 在test.scss目录下sass test.scss test.css回车，即生成test.css

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

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

sass入门初体验

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

aisuhua 2019-08-30 13:16 评论0 收藏0
20分钟gulp快速入门

摘要：所以出现了各种前端构建化工具也应运而生等已经成为现在前端开发工程师的必备技能之一。结语今天的分享就告一段落啦希望能对大家有所帮助。在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且...

RichardXG 2019-08-22 15:06 评论0 收藏0
前端利器：SASS基础与Compass入门

摘要：在吸取了的一些特性基础上，有了大幅改进，也就是现在的。嵌套极大程度上降低了选择器名称和属性的重复书写。选择器嵌套选择器嵌套是指从一个选择器中嵌套子选择器，来实现选择器的继承关系。也已经成为的一个标配组件。 SASS是Syntactically Awesome Stylesheete Sass的缩写，它是css的一个开发工具，提供了很多便利和简单的语法，让css看起来更像是一门...

娣辩孩 2019-08-28 17:54 评论0 收藏0
[Sass]-Sass入门

摘要：未编译样式多继承链式继承占位选择器编译后样式中使用声明混合，可以传递参数，参数名以符号开始，多个参数以逗号分开，也可以给参数设置默认值。初识Sass SASS简介 sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组...

godiscoder 2019-08-29 13:27 评论0 收藏0
vue入门文章

摘要：本来想自己写一篇关于入门的文章。后面可能在这篇文章基础上，有所内容的增加。预处理器定义了一种新的专门的编程语言，编译后成正常的文件。本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏...

seanHai 2019-08-29 17:06 评论0 收藏0