SASS指南针

Wesley13
• 阅读 357
/**配置sass-用gulp自动编译sass变量计算功能嵌套注释代码重用    -继承    -Mixin    -颜色函数插入文件高级用法    -条件语句    -循环语句    -自定义函数 */

一、配置sass-用gulp自动编译sass

SASS是Ruby语言写的,必须安装Ruby,再安装SASS,

基于gulp编写编译sass要安装gulp-sass

npm install gulp-sass --save-dev

gulpfile.js中写两个任务:

  • sass编译任务

  • sass文件自动编译任务

    const gulp = require('gulp');const sass = require('gulp-sass');gulp.task('sass',function () { return gulp.src('scss//*.scss') .pipe(sass()) .pipe(gulp.dest('css'));});gulp.task('watch-sass', function(donw) { gulp.watch('scss//*.scss',gulp.series('sass')); console.log("====== watching sass files... =====");});

这样就完成了sass文件的实时编译了。下面开始sass之旅~

二、变量

所有变量以$开头,如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中

$blue:#1875e7;div {  color: $blue;}$side:left;.rounded {  border-#{$side}-radius:5px;}

对应的css:

div {    color: #1875e7;}.rounded {    border-left-radius: 5px;}

三、计算功能

在sass中使用算式

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

对应的css:

body {    margin: 7px;    top: 150px;    right: 10%;}

四、嵌套功能

SASS允许选择器嵌套、属性嵌套、在嵌套代码内,可用&引用父元素

/*选择器嵌套*/div {  h1 {    color: red;  }}/*属性嵌套*/p {  border:{    color:red;  }}/*嵌套代码内,可使用&引用父元素*/a {  &:hover {color:#fff}}

对应的css:

/*选择器嵌套*/div h1 {    color: red;}/*属性嵌套*/p {    border-color: red;}/*嵌套代码内,可使用&引用父元素*/a:hover {    color: #fff;}

五、注释

SASS共有两种注释风格。

标准的CSS注释 /*comment*/ ,会保留到编译后的文件。*

单行注释 // comment,只保留在SASS源文件中,编译后被省略。

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

/*comment1*/// comment2/*!  comment3 */

css:

/*comment1*//*!  comment3 */

六、代码的重用

6.1 继承

SASS允许一个选择器,继承另一个选择器,比如下面的class2继承了class1,要使用@extend命令:

.class1 {  border: 1px solid #ddd;}.class2 {  @extend .class1;  font-size: 120%;}

.class1, .class2 {    border: 1px solid #ddd;}.class2 {    font-size: 120%;}

6.2 Mixin

minxin是可以重用的代码块。

  • 使用@mixin命令,定义一个代码块;使用@include命令,调用这个minxin。

  • mixin还可以指定参数和缺省值,使用的时候可以根据需要加入参数

    /mixin定义一个代码块/@mixin left { float: left; margin-left: 10px;}div { @include left;}/mixin可以指定参数和缺省值, 使用的时候可以根据需要加入参数/@mixin right($value: 10px){ float: right; margin-left: $value;}div { @include right;}div2 { @include right(20px);}/用mixin生成浏览器前缀/@mixin rounded($vert, $horz, $radius: 10px) {     border-#{$vert}-#{$horz}-radius: $radius;     -moz-border-radius-#{$vert}#{$horz}: $radius;     -webkit-border-#{$vert}-#{$horz}-radius: $radius;}#navbar li { @include rounded(top, left); }#footer { @include rounded(top, left, 5px); }

    /mixin定义一个代码块/div { float: left; margin-left: 10px; }/mixin可以指定参数和缺省值, 使用的时候可以根据需要加入参数/div { float: right; margin-left: 10px; }div2 { float: right; margin-left: 20px; }/用mixin生成浏览器前缀/#navbar li {     border-top-left-radius: 10px;     -moz-border-radius-topleft: 10px;     -webkit-border-top-left-radius: 10px; }#footer {     border-top-left-radius: 5px;     -moz-border-radius-topleft: 5px;     -webkit-border-top-left-radius: 5px; }

6.3 颜色函数 - sass中的内置函数

SASS提供了一些内置的颜色函数,以便生成系列颜色。

内置的意思就是不需要自己去定义。

div {  color: darken(#cc3,10%);}

div {  color: #a3a329; }

6.4 插入外部文件

@import用来插入外部文件

@import "test2";/*在test.scss中引入test2.scss*/

/*我写在test2.scss中*/.csx {  color: red; }

生成后的test.css如下:将test2.scss中写的也生成到了test.css中了

,这个和CSS的 @import引入不一样,css不会将两个文件进行合并处理。

七、高级用法

7.1 条件语句

@if 、@else命令

/*条件语句*/p {  @if 1 + 1 == 2 {    border:1px solid;  } @else {    border: 2px dotted;  }}

p {border: 1px solid; }

7.2 循环语句

支持for循环

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

 .border-1 {  border: 1px solid blue; } .border-2 {  border: 2px solid blue; } .border-3 {  border: 3px solid blue; } .border-4 {  border: 4px solid blue; }

while循环

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

.item-6 { width: 12em; }.item-4 {width: 8em; }.item-2 { width: 4em; }

each命令 和for命令类似

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

.a { background-image: url("/image/a.jpg");}.b { background-image: url("/image/b.jpg");}.c { background-image: url("/image/c.jpg");}.d {background-image: url("/image/d.jpg");}

7.3 自定义函数

/*自定义函数*/@function double($base) {  @return $base * 2;}.sidebar {  margin-left: double(5px);}

/*自定义函数*/.sidebar { margin-left: 10px; }

八、注意事项

变量运算时,符号两边要加空格,没加空格,编译就会失败

$a:$a - 2; // - 号两边要有空格

SASS指南针

Demo地址:https://github.com/pluscai/blog/tree/master/sass-demo

本文分享自微信公众号 - BUG架构师(pluscai1057756095)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
技术小男生 技术小男生
2个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi /etc/profile2:按字母键i进入编辑模式,在最底部添加内容: JAVAHOME/opt/jdk1.8.0152 CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jar PATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、 请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。 创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现 接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿 吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录 问题 用navicat导入数据时,报错: 原因这是因为当前的MySQL不支持datetime为0的情况。 解决修改sql\mode: sql\mode:SQL Mode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。 全局s
Easter79 Easter79
1年前
vue 中安装使用sass 报错遇到的问题整理
不出错的情况下,正常安装: **1.**安装包: `npm install node-sass --save-dev` `npm install sass-loader --save-dev` (sass-loader依赖于node-sass) **2.**在build文件夹下的webpack.base.conf.js的rules里面添加配置
Stella981 Stella981
1年前
CSS预编译器:Sass(入门),更快的前端开发
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
Stella981 Stella981
1年前
Sass 变量的声明与使用
本节我们学习 Sass 中的变量,那么什么是变量呢? Sass 中的变量可以用来存储一些信息,并且重复使用。变量可以存储的信息包括字符串、数字、布尔值、颜色值等等。 #### 声明变量 Sass 中声明变量需要用到 `$` 符号,格式为: $变量名: 变量值; ##### 示例: 例如下面我们定义一个变量,并给这个变量赋了一个颜色
Stella981 Stella981
1年前
Sass预编译
sass基于Ruby               ruby的模块管理器叫gem   正规的安装方式是gem install sass                调用命令     sass    sass文件    css文件 **webpack编译sass**         需要的模块 style-loader  css-loader  sas
Stella981 Stella981
1年前
Sass
**嵌套规则 (Nested Rules)** ----------------------- Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器 #main p { color: #00ff00; width: 97%; .redbox {
Stella981 Stella981
1年前
SASS 使用(vs code)
**二、在vs code中编译sass** 1、在拓展商店里搜索“easy sass”,并安装,安装成功后点重新加载。 ![](https://oscimg.oschina.net/oscnet/cd1564b022465a6d848f658f854ed75a6c9.png) 2、接下来进行配置: 在 vs code 菜单栏依次点击“文件 首选项 设置
Stella981 Stella981
1年前
Sass的运算
本节我们学习 Sass 中的运算,一般的编程语法中都支持使用运算,Sass 中同样可以做各种数学运算,包括最基本的加减乘除运算、变量运算、颜色运算、字符运算等。本节我们主要讲一下 Sass 中最基本的数学运算。 #### 加法运算 加法运算 `+` 是 Sass 中基本运算之一,在变量或者属性中都可以做加法运算。 ##### 示例: $num
helloworld_34035044 helloworld_34035044
4个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。 uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid() 或 uuid(sep)参数说明:sep 布尔值,生成的uuid中是否包含分隔符'',缺省为