欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

SASS用法指南_html/css_WEB-ITnose

程序员文章站 2022-04-06 21:12:47
...
光看是没用的,过不了多久就忘光光,所以还是记录一下吧。

首先windows还是离不开我,所以还是环境还是windows..

一、SASS环境安装配置

SASS是ruby写的,所以要想将sass编译成css文件,就给配上ruby环境。

windows下载装个 rubyinstaller 就行了,注意要保证 配置好环境变量。

比如 E:\Ruby22-x64\bin 配置到系统环境变量 path中

cmd命令行执行 ruby -v 正确则安装配置正确

接下来是使用gem给我们装上sass

一般的做法是直接

gem install sass

但很多时候回报错,也许是国内网络太差被封杀了.. 通过 -V 参数可以看到具体信息

一般来说,淘宝团队都提供了很多镜像,去看看~

使用简单的命令,切换源就行

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org# 请确保只有 ruby.taobao.org gem install rails

sass安装成功,先来体验一下吧~

在sass目录下新建一个test.scss文件,写入几句,直接执行看看。

可使用 sass test.scss test.css 将scss文件直接编译成css文件

二、SASS用法:

如上例test.scss文件,我可以定义编译后css代码的风格。

  * nested:嵌套缩进的css代码,它是默认值。

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

  * compact:简洁格式的css代码。

  * compressed:压缩后的css代码。

也可以直接定义监听文件的改动,修改scss文件,css将会得到同步更新

接下来,谈谈sass的各语法

1.像css那样,直接定义

div{width:50px;}

2.使用变量,变量有$标识符,如果要定义默认变量值,则在后方加上 !default即可。

如果变量要放在字符串里头,就用 #{}包含.可以使用计算功能

$width: 500px;$height: 300px !default;$side: right;div{     border-#{$side}-width: $width / 5;}  |  |  |div {  border-right-width: 100px;}

3.嵌套。sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。如果要使用父类,就用&符,如常见的 a:hover

$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}    |    |    |div {  width: 500px;}div .answer a:hover {  text-decoration: none;}

4.混入(Mixins). 类似于定义一个宏/函数,然后在需要的地方调用

// *.scss$width: 500px;@mixin right($color: '#0f0'){     font-weight: bold;    color: $color;}div{    width: $width;    .answer{         @include right();    }}//---------------------------------------// *.cssdiv {  width: 500px;}div .answer {  font-weight: bold;  color: "#0f0";}

5.导入其他scss或css文件 @import , 导入scss文件会自动编译展开,导入css则原样置入

//test.scss$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}@import './test1.css';@import './test1.scss';p{width: $width / 10;}//test1.cssp.new{    color: red;}//test1.scss$width: 200px;#nav{     width: $width;}//最后,test.css  可以看到,$width变量的值已经更新@import url(./test1.css);div {  width: 500px;}div .answer a:hover {  text-decoration: none;}#nav {  width: 200px;}p {  width: 20px;}

6.继承/扩展 使用 @extend

// *.scss$width: 100px;.block{     color: #333;    border-left: 1px;}.block-1{     @extend .block;    width: $width / 2; }.block-2{     @extend .block-1;    background-color: green;}//  *.css.block, .block-1, .block-2 {  color: #333;  border-left: 1px;}.block-1, .block-2 {  width: 50px;}.block-2 {  background-color: green;}

7.颜色函数,sass内置了许多颜色函数,例如加亮、变暗、颜色梯度等。

如:

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

更多颜色函数

8.其他比较少用到的方法

1] 变量也可以有多个值:类似于一个数组

// *.scss$px : 1px 2px 3px 4px;div{     border-left: nth($px,2);}// *.cssdiv {  border-left: 2px;}

2]可以用map做key-value关系 用@each遍历(类似于php语法)

// *.scss$headings : (h1: 12px,h2:13px,h3:14px);@each $header,$size in $headings{     #{$header}{         font-size: $size;    }}// *.cssh1 {  font-size: 12px;}h2 {  font-size: 13px;}h3 {  font-size: 14px;}

3] 跳出选择器嵌套 @at-root 不过应该很少用到,如果要跳出媒体的嵌套例如 @media .block-1{}的,type就选media|all

语法为 @at-root (without: type) type有四种:all(所有),rule(常规css,默认),media(media),support(support)

// *.scss.block-1{     border-left:1px;    .flw{         color: red;        @at-root{             .today{                 font-size: 14px;            }        }    }    @at-root .tomo{         font-size: 12px;    }}// *.css.block-1 {  border-left: 1px;}.block-1 .flw {  color: red;}.today {  font-size: 14px;}.tomo {  font-size: 12px;}

4]条件判断和循环等

// *.scss$width: 25px;.block-5{     width: 50px;}// 现在不包含4,如果是froms 1 through 4 ,就会包含4@for $i from 1 to 4{     .block-#{$i}{         @if $i % 2 == 0 { width: $width;}        @else {width: 50px;}    }}// *.css.block-5 {  width: 50px;}.block-1 {  width: 50px;}.block-2 {  width: 25px;}.block-3 {  width: 50px;}

5]当然了,也可以定义个函数,然后调用~

逐增width 这css越来越像编程了..

// *.scss$width: 25px;.block-5{     width: 50px;}@function inc($num){     @return $num + 1;}@for $i from 1 through 4{     .block-#{$i}{         @if $i % 2 == 0 {             $width: inc($width);            width: $width;        }        @else {width: 50px;}    }}// *.css.block-5 {  width: 50px;}.block-1 {  width: 50px;}.block-2 {  width: 26px;}.block-3 {  width: 50px;}.block-4 {  width: 27px;}
相关标签: SASS用法指南