scss学习

cpupro 发布于2019-08-02 16:00 / 2152人阅读

摘要：和的区别文件扩展名不同和是以严格缩进式语法规则来书写的，不带大括号和分号而的语法和书写语法类似。单行注释，只保留在源文件中，编译后被省略。在后面加一个感叹号，表示这是重要注释。重要声明继承允许一个选择器，继承另一个选择器，使用命令。

1. SASS和SCSS的区别

文件扩展名不同：“.sass”和“.scss”；

SASS是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和CSS书写语法类似。

2. 安装

先安装Ruby(http://rubyinstaller.org/down...

通过命令安装sass: 打开命令终端，输入：gem install sass

3. sass编译

3.1 单文件编译

sass <编译的sass文件路径>/xx.scss: <输入的css路径>/xx.css
sass input.scss:output.css

3.2 多文件编译

sass src/sass/:dist/css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

3.3 SASS提供四个编译风格的选项：

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

在编译的时候带上参数" --style expanded":

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

sass --style compressed test.sass test.css

3.4 watch监控sass文件或目录

  // watch a file
　sass --watch input.scss:output.css
　// watch a directory
　sass --watch app/sass:public/css

官方在线工具 https://www.sassmeister.com/

用法 1. 变量

sass允许使用变量，所有变量以$开头。

普通变量声明后在全局范围内可使用
默认变量在值的后面加上!default即可

$side: left;

如果变量需要嵌套在字符串之中，就必须需要写在#{}之中:

$side: left;
.rouned {
    border-#{$side}-radius: 3px;
}

2. 加减乘除

sass允许在代码中使用算式：

body {

    margin:(14px/2);
    top: 50px + 100px;   // 变量或属性均可以
    right: $var * 10%;
    left: 10px * 2px; // 报错
    left: 10px * 2; // 正确
}

注意，sass除法较为特殊.如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。

p {
  font: 10px/8px; // 纯CSS，不是除法运算
  width: $width/2;  // 使用了变量，是除法运算
  width: round(1.5)/2;  // 使用了函数，是除法运算
  height: (500px/2); // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

3. 嵌套

3.1 选择器嵌套

div h1 {
    color: red;
}



// 可以写成如下：
div {
    h1 {
        color: red;
    }
}

在嵌套的代码块中，可以使用&引用父元素

a {
    &:hover {  
        color: red;
    }
}

3.2 属性嵌套

如border-color、font系列等

p {
    border: {
        color: red;
    }
    
    font: {
        size: 12px;
        weight: 700;
    }
}

注意，border必须加上冒号：

4. 注释

SASS共有两种注释风格。

标准的CSS注释:

/* comment */ ，会保留到编译后的文件。

单行注释:

// comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!
    重要声明
*/

5. 继承 @extend

SASS允许一个选择器，继承另一个选择器，使用@extend命令。比如，现有class1：

.class1 {
    border: 1px solid #ffffd;
}

.class2 {
　　@extend .class1;
　　font-size:120%;
　　}

注意：要继承的不仅仅是类选择器，可以是id选择器也可以是标签选择器，也可以是某个状态，任何选择器都能继承。

此外，可以用占位符%构建只用来继承的选择器。
用占位符%声明的代码，如果不被@extend调用就不会被编译，也不会渲染到CSS的规则集中。

%br5 {
    border-radius: 5px;
}
// 使用@extend调用：
.btn {
    @extend %bt5;
}

// 编译后
.btn {
    border-radius: 5px;
}

6. Mixin混合宏

Mixin有点像C语言的宏（macro），是可以重用的代码块。

首先，使用@mixin命令，定义一个代码块。

@mixin left {
　　float: left;
　　margin-left: 10px;
}

其次，使用@include调用

div {
　　@include left;
}

mixin的强大之处，在于可以指定参数和缺省值。

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

7. 插入/引入外部文件

@import命令，用来插入外部文件。

@import "path/filename.scss";

8. 条件语句

@if语句

@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

9. 循环

@for循环

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

@while循环

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

@each命令

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

10. 自定义函数

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

私有云混合云 SCSS html5 scss 学习机器学习学习机器学习学习

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

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

SCSS学习笔记（一）

摘要：的由来就是加强版的，要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行，年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。变量允许使用变量，所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Ha...

simpleapples 2019-08-29 16:37 评论0 收藏0
sass的学习记录

摘要：核心团队不懈努力，一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。 sass简介 SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容C...

xuweijian 2019-08-29 14:21 评论0 收藏0
Metronic学习之路(一)

摘要：在之后已经只能接受第二个参数必须为函数。运行命令执行文件的版本修改任务。运行执行和文件压缩任务压缩后的文件会输出到目录格式化该命令可以将格式化缩进，对于和两个标签内的内容不进行格式化。使用GULP构建工具对Metronic进行管理部署gulp 打开终端并进入到 Metronic 的 theme 根目录，运行以下代码 $ npm install //安装程序的依赖包发现 npm...

elarity 2019-08-06 11:50 评论0 收藏0
scss学习

摘要：和的区别文件扩展名不同和是以严格缩进式语法规则来书写的，不带大括号和分号而的语法和书写语法类似。单行注释，只保留在源文件中，编译后被省略。在后面加一个感叹号，表示这是重要注释。重要声明继承允许一个选择器，继承另一个选择器，使用命令。 1. SASS和SCSS的区别文件扩展名不同：.sass和.scss； SASS是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和C...

wzyplus 2019-08-29 14:01 评论0 收藏0
Sass 与 SCSS 是什么关系？

摘要：下面是一个简短的说明当我们说起，我们经常指的是两种事物一种预处理器和一种语言。同时，预处理器有两种不同的语法一种缩进语法一种语法历史最开始，是的一部分，是一种预处理器，由开发者设计和开发。我最近写了很多 Sass 代码，但是最近发现并不是每一个人都知道 Sass 具体是什么。下面是一个简短的说明：当我们说起 Sass ，我们经常指的是两种事物：一种 css 预处理器和一种语言。我们...

funnyZhang 2019-08-30 13:07 评论0 收藏0