博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
SASS用法详解
阅读量:5843 次
发布时间:2019-06-18

本文共 7129 字,大约阅读时间需要 23 分钟。

SASS 是 CSS 预处理器的简称。本文太长,工作中用的最多的就是嵌套混合和集成,可以搜索来跳转!

SASS 编译环境 (SASS 最终需要编译为 CSS 才能运行)

  • koala (一款拥有图片界面的编译工具,已停止更新)
  • 命令行的方式编译(推荐):

    • 先安装Ruby环境

      • 安装路径中不能有中文,和特殊符号
      • ruby 一定要添加到环境变量
    • gem install sass Ruby环境安装后,执行此命令安装 sass 预处理器

SASS 文件后缀是.scss

sass中的注释

//这样的注释不会被编译/* * 这样的注释会被编译到输出文件中*/

SASS 基本 .scss 文件的编译命令

sass style.scss style_out.css

SASS --watch 监听指定单文件或文件夹

监听单个文件

sass --watch style.scss:style_out.css

监听文件夹

sass --watch somefolder:somefolder_out

其中somefolder为执行命令目录下的文件夹,输出文件夹somefolder_out名称自定义,没有的话会自动创建

 SASS 四种输出模式

  1. 嵌套输出方式 nested
  2. 展开输出方式 expanded
  3. 紧凑输出方式 compact
  4. 压缩输出方式 compressed

以 style.scss 文件为例

@charset "utf-8";#box{    width:400px;    height:400px;    border:1px solid gray;    h1{        font-size:22px;        color:red;    }    p{        font-size:18px;        color:green;    }}
  1. 嵌套输出方式,命令为 sass style.scss:style.css --style nested
#box {  width: 400px;  height: 400px;  border: 1px solid gray; }  #box h1 {    font-size: 22px;    color: red; }  #box p {    font-size: 18px;    color: green; }/*代码有缩进*/
  1. 展开输出方式常用,命令为 sass style.scss:style.css --style expanded
#box {  width: 400px;  height: 400px;  border: 1px solid gray;}#box h1 {  font-size: 22px;  color: red;}#box p {  font-size: 18px;  color: green;}/*代码没有缩进,和我们平常编写的css格式一样*/
  1. 紧凑输出方式,命令为 sass style.scss:style.css --style compact
#box { width: 400px; height: 400px; border: 1px solid gray; }#box h1 { font-size: 22px; color: red; }#box p { font-size: 18px; color: green; }/*一条规则占一行*/
  1. 压缩输出方式,命令为 sass style.scss:style.css --style compressed
#box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}/*一条规则占一行*/

SASS变量和作用域

e.g.还是在style.scss中

@charset "utf-8";$width:300px;$height:200px;$bgc: red;//变量多值如何调用? //$bgc: red, pink; background-color:nth($bgc, 1);取第一个变量red//$bgc: red, pink; background-color:nth($bgc, 2);取第二个变量pink$color: #666;$yahei: '"Microsoft YaHei", "微软雅黑"';$bor:10px solid red;//sass允许多值变量

变量作用域

$color:red;body {$color:blue;//选择器内部的$color变量会把外部的$color覆盖,和js差不多//同时,选择器内部的变量,外部无法调用}

SASS 嵌套语法

  • 选择器嵌套
  • 属性嵌套(了解即可,用途不大)
  • 跳出嵌套,@at-root 既然要跳出,直接写成全局样式也可以的,所以这应该是特殊情况下使用的!

嵌套是SASS里面最好用的东西,我们可以按照DOM结构的层级关系来写css样式

//选择器嵌套body { p {   font-size: 16px; }}//属性嵌套加 在属性前缀加冒号 如font: //类似像font-size:16px;font-color:#ccc;font-style:normal;font-weight:bold;可以写成.box {  font: {    size: 16px;    color: #ccc;    style: normal;    weight: bold;  }}
//单个选择器跳出.parent-2 {    color:#f00;    @at-root .child {        width:200px;    }}//多个选择器跳出.parent-3 {    background:#f00;    @at-root {        .child1 {            width:300px;        }        .child2 {            width:400px;        }    }}//其实@at-root是有一个默认值@at-root(without:rule)//除此之外,它还有四个值//1、all(表示所有)//2、rule(表示常规css)//3、media(表示media)//4、support(表示support,因为@support目前还无法广泛使用,所以在此不表示)。

@at-root (without: …)和@at-root (with: …)

/*跳出父级元素嵌套*/@media print {    .parent1{        color:#f00;        @at-root .child1 {            width:200px;        }    }}/*跳出media嵌套,父级有效*/@media print {    .parent2{        color:#f00;        @at-root (without: media) {            .child2 {                width:200px;            }        }    }}/*跳出media和父级*/@media print {    .parent3{        color:#f00;        @at-root (without: all) {            .child3 {                width:200px;            }        }    }}

css结果是

@charset "UTF-8";/*跳出父级元素嵌套*/@media print {  .parent1 {    color: #f00;  }  .child1 {    width: 200px;  }}/*跳出media嵌套,父级有效*/@media print {  .parent2 {    color: #f00;  }}.child2 {  width: 200px;}/*跳出media和父级*/@media print {  .parent3 {    color: #f00;  }}.child3 {  width: 200px;}

@at-root与 & 配合使用

.child{    @at-root .parent &{        color:#f00;    }}

css输出

.parent .child {  color: #f00;}

@mixin 声明混合,可理解为js中的函数。

@mixin 和 @include是成对出现的,就像js中的定义函数和调用函数成对出现一样。

//声明混合@mixin bgc() {  opacity: #f00;}//在选择器内可以使用@include调用混合.demo {  @include bgc();}

@mixin 混合传参和默认参数

//声明混合,不带参数。正常使用,没毛病//声明混合,带参数,调用混合时不传参数,编译后的文件会报错//声明混合,带参数。正常使用,没毛病!//混合中参数有默认值,调用时候的参数是可选的!//混合中,形参加三个点的运算符@mixin bgc($bgc...),调用时可以传递多个参数。有点类似js中的展开运行符//只不过SASS中是将三个点写在后面,js中是写在前面
//声明混合@mixin bgc($bgc) {  opacity: $bgc;}.demo {  @include bgc(#f00);}

混合中默认参数的写法

//声明混合@mixin bgc($bgc:#00f) {  opacity: $bgc;}//传参时,默认参数不生效,不传参数的时候,默认值生效.demo {  @include bgc(#f00);}

if else if 条件判断

$type: audi;p {  @if $type == benz {    color: red;  } @else if $type == mahindra {    color: blue;  } @else if $type == audi {    color: green;  } @else {    color: black;  }}

css中输出为

p {  color: green; }

通过sass的@if,@else if语法,根据传入参数,实现动态输出css样式

// 画三角形@mixin声明@mixin sj($fx:top,$size:100px,$color:red){  @if ($fx == top) {    border-color: transparent transparent $color transparent;    border-style: dashed dashed solid dashed;  }  @else if($fx == right){    border-color: transparent transparent transparent $color;    border-style: dashed dashed dashed solid;  }  @else if($fx == bottom){    border-color: $color transparent transparent transparent;    border-style: solid dashed dashed dashed;  }  @else if($fx == left){    border-color: transparent $color transparent transparent;    border-style: dashed solid dashed dashed;  }  width: 0px;  height: 0px;  overflow: hidden;  border-width: $size;}//mixin的调用.demo{  @include sj(left);}

编译后的css

.demo {  border-color: transparent red transparent transparent;  border-style: dashed solid dashed dashed;  width: 0px;  height: 0px;  overflow: hidden;  border-width: 100px; }

SASS 继承 中的 @extend

@extend让你能够在多个选择器中通过继承的方式共享一段样式:

有个问题就是, 如果你不可能用到.fl这个类,而它还是会出现在输出结果中!
占位符选择器% 可以解决这个问题

.fl {  float: left;}.box { @extend .fl}//输出的css为.fl .box {  float: left;}

占位符选择器%

zoom:1是兼容IE6,7而设置的,后面的属性 IE6 IE7能识别,IE8 IE9……都不能识别;"_"后面的属性,只有IE6能识别,其他版本(IE7 8 9 更高级别)都不能识别
%clearfix {  *zomm: 1;//因为ie6,ie7不能用after或者before伪类  &:after,  &:before {    content: ".";    clear: both;    display: block;    overflow: hidden;    font-size: 0;    height: 0;   }}//上面百分号定义的选择器,可以在其它选择器中直接使用,//而百分号选择器是不会被编译到最后的css中去的.container {    width; 100px;    height: 100px;    @extend %clearfix     }

字符串插值#{$XXX},这和es6的字符串模板插值${XXX}非常相似

{}插值符号的作用有两个

  • 一个是字符串插值
  • 另一个是避免运算
$img: '../images/';.content {  background: url(#{$img}10086.jpg) left top no-repeat;}

SASS中属性的值可以进行运算,运算符的前后必须要有空格,否则报错

$color: #f00;//可以写成$color: #f00 + 100;//rgb(255+100, 0+100, 0+100),这就是它的原理,255加任何值都为255

{}避免运算的例子

$size1 = 12px;$size2 = 24px;p {  color: red;  font: 12px / 24px "Microsoft YaHei"}//这里表示p元素会显示为12px,行高为24像素 的微软雅黑字体,//但是当我们用变量的时候p {  color: red;  font: $size1 / $size2 "Microsoft YaHei"}//输出结果是p {color: red;font: 0.5 "Microsoft YaHei";}//这里的0.5显然不是我们想要的,可以用插值符号#{}避免运算p {  color: red;  font: #{$size1} / #{$size2} "Microsoft YaHei"}

for 、while、each循环

  • @for $i from 1 through 10
  • @for $i from 1 to 10 这两个for之间唯一 的区别是through可以取到10,而to的语句只能取到9
@for $i from  1 through 10 {   .item#{$i}{       width: 10px * $i    }}//输出为.item1 {width: 10px;}.item2 {width: 20px;}....item10 {width: 100px;}

while 循环

$a: 5;@while($a<20) {    .item#{$a} {      width: 20px * $a;    }    $a: $a+1;}

@each

$icon_name: user, pass, checked,select;@each $i in $icon_name {  .icon_#{$i} {  width: 10px;  }}//输出为.icon_user { width: 10px; }.icon_pass { width: 10px; }.icon_checked { width: 10px; }.icon_select { width: 10px; }

转载地址:http://npqcx.baihongyu.com/

你可能感兴趣的文章
从周五开始香港主机特别慢,香港主机用户有同感吗?
查看>>
VAVA宠物机器人来了,可实现远程互动以及自动投食
查看>>
使用VMware安装CentOS7详请
查看>>
Ember.js 3.9.0-beta.3 发布,JavaScript Web 应用开发框架
查看>>
python标准库00 学习准备
查看>>
4.2. PHP crypt()
查看>>
Winform开发框架之附件管理应用
查看>>
软链接文件和硬链接文件
查看>>
Spring Cloud Config服务器
查看>>
commonservice-config配置服务搭建
查看>>
连接池的意义及阿里Druid
查看>>
ComponentOne 2019V1火热来袭!全面支持 Visual Studio 2019——亮点之WinForm篇
查看>>
全面的Spring Boot配置文件详解
查看>>
如何优雅地玩转分库分表
查看>>
Python递归函数与匿名函数
查看>>
我的友情链接
查看>>
CentOS添加永久静态路由
查看>>
mysql多实例的安装以及主从复制配置
查看>>
loadrunner安装运行一步一步来(多图)
查看>>
git请求报错 401
查看>>