Sass学习笔记

最新推荐文章于 2024-08-22 11:40:47 发布

LGD_HuaFEEng

最新推荐文章于 2024-08-22 11:40:47 发布

阅读量176

点赞数

分类专栏： Sass CSS 文章标签： sass css 前端 css3 less

本文链接：https://blog.csdn.net/LGD_HuaFEEng/article/details/104240118

版权

CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Sass

1 篇文章 0 订阅

订阅专栏

文章目录

一、工具与安装

1.1 工具

（IDE）WebStorm：http://www.jetbrains.com/webstorm/
（Text Editor）Sublime Text：http://www.sublimetext.com/

1.2 如何安装Sublime Text Plugins:

安装Package Control：https://packagecontrol.io/
Ctrl+` 打开控制台，执行：

import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Ctrl+Shift+P 输入Pci打开Package Control Install，然后安装Sass和Sass Build

二、Sass与Compass

2.1 为什么需要css预处理器

使用变量
自动转化RGBA颜色值
浏览器前缀
嵌套规则
media query更简单
自动压缩css

2.2 什么是Sass

https://sass-lang.com/

2.3 Sass与CSS

CSS并不能算是一门真正意义上的“编程”语言，无法完成嵌套、继承、设置变量等工作
解决CSS的不足，开发者想到了编写一种对css进行预处理的“中间语言”

2.4 .sass与.scss

最初它是为了配合haml而设计，所以和haml有着一样的缩进风格
从第三代开始，保留缩进式风格，完全向下兼容普通的css代码

2.5 什么是Compass

http://compass-style.org/
Compass is an open-source CSS Authoring Framework.
Compass是Sass的工具库
在Sass的基础上封装了一系列有用的模块和模板，补充Sass的功能
Compass与Sass的关系类似于jQuery与JavaScript的关系
模块
- reset模块
- css3模块
- layout模块
- typography模块
- utilities模块

2.6 Sass与Compass的安装

https://sass-lang.com/install
http://compass-style.org/install/
Ruby
- https://www.ruby-lang.org/en/
- https://rubyinstaller.org/
依赖Ruby，所以要先安装Ruby
Windows下通过RubyInstallers来安装
gem sources [-r | -a | -u] [https://gems.ruby-china.com | http://ruby.taobao.org]
安装Compass： gem install compass

三、Sass、Less与Stylus

3.1 官网

https://sass-lang.com/
http://lesscss.org/
http://stylus-lang.com/

3.2 安装

Sass需要安装Ruby，然后通过gem安装
Less有两种安装方式
- 客户端：引入less.js，然后就可以直接使用.less文件
- 服务器：先安装node，然后npm安装less
Stylus的安装类似于Less的服务端安装

3.3 语法

都支持多行注释与单行注释
.sass 缩进
.scss 兼容css写法
.less 兼容css写法
.styl
- h1 {
  color: red;
  }
- h1
  color: red;
- h1
  color red
- 三种语法可混用
变量定义
- .sass $color: red
- .scss $color: red;
- .less @color: red;
- .styl $color: red; color: red;
嵌套
混入
- .scss @mixin alert($color: blue){color: $color;}
- .less .alert(@color: blue){color: @color;}
- .styl alert($color = blue){color: $color;}

继承

.scss

.block {
  margin: 10px;
}
p {
  @extend .block;
}

.less

.block {
  margin: 10px;
}
p {
  .block;
}

.styl 与.scss一样

四、Sass语法

4.1 Sass基础

创建工程
- 使用Sass创建
  - 新建文件夹，书写sass文件
  - 使用sass命令
- 使用Compass创建
  - compass create
  - compass create --bare --sass-dir “sass” --css-dir “css” --images-dir “img” --javascript-dir “js”
  - 编译Sass sass
  - 监视Sass文件 sass --watch :
  - 监视文件夹 sass --watch :
  - 编译Sass compass compile
    - 此命令为Compass命令
    - 此命令只会编译有变化的Sass文件，如果要强制编译所有的Sass文件，可以使用： compass compile --force
    - 一般在Compass项目根目录执行
    - Usage: compass compile [path/to/project] [path/to/project/src/file.sass …] [options]
    - 显示帮助信息 compass compile --help
  - 监视文件夹 compass watch
  - 四种输出风格
    - –style [nested|expanded|compact|compressed]
    - nested
```
body {
  padding: 0; }
```
    - expanded
```
body {
  padding: 0;
}
```
    - compact
```
body { padding: 0; }
```
    - compressed
```
body{padding:0;}
```
使用命令行
理解config.rb
- environment = :development
- output_style = (environment == :development) ? :expanded : :compressed
Sass的注释语法
- // 注释不会生成到文件中
- /**/ 会生成到文件中（compressed模式不会生成到文件中）（如果compressed模式也要生成，用/!/ 重要注释）
- 中文注释
  - engine.rb添加以下代码
  - Encoding.default_external = Encoding.find(‘utf-8’)
  - engine.rb文件路径（根据自己的安装路径）：E:\Program Files\Ruby26-x64\lib\ruby\gems\2.6.0\gems\sass-3.4.25\lib\sass
Sass变量
- 局部变量与{}作用域有关
- 全局变量 $color: red !global; 可在任意地方定义
- 变量默认值 $fontSize: 12px !default; 先解析默认值
- 多值变量
  - $p a d d i n g s : 5 p x 10 p x 5 p x 10 p x; p a d d i n g - l e f t : n t h ($ paddings, 1) (索引值是1开始)
  - $m a p s : (c o l o r : r e d, b o r d e r C o l o r : b l u e); b a c k g r o u n d - c o l o r : m a p - g e t ($ maps, color);
- 变量特殊用法
  - 变量用在熟悉或者选择器上，使用#{变量名}
```
$className: main;
.#{$className} {
  width: 50px;
}
```
  - 变量中 - 与 _ 不影响。$text-info: lightgreen; 与 $text_info: lightgreen; 一样
样式导入
- 部分文件
  - _part.scss 以下划线开头，不会被编译，专门为导入而编写的sass文件，不会被生成对应的独立文件
  - 局部文件可以被多个不同的文件引用，可以和默认变量值配合
  - @import “part”;
- 嵌套导入
- 原生CSS导入
  - @import “css.css”; 文件名字以.css结尾
  - @import “http://sss/xx”; 是一个URL地址
  - @import url(css.css); 文件名字是CSS中的url()值
嵌套
- 选择器嵌套
- 属性嵌套
```
footer {
  background: {
    color: red;
    size: 100% 50%;
  }
}
```
- &–引用父选择器
- @at-root，跳出嵌套
  - 默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root（without: media），@at-root(without: support)。这个语法的关键词有四个：all（所有），rule（常规css），media（media），support（support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root(without: rule)。
```
@media screen and (max-width: 600px) {
  @at-root (without: media rule) {
    .container {
      background: lightgreen;
    }
  }
}
```
- @at-root 与 &
```
.text-info {
  color: red;
  @at-root nav & {
    color: blue;
  }
}
```
继承
- 简单继承
- 多继承
```
.alert {
  background-color: #FFEEDD;
}
.small {
  font-size: 12px;
}
/*第一种*/
.alert-info {
  @extend .alert;
  @extend .small;
  color: red;
}
/*第二种*/
.alert-info {
  @extend .alert, .small;
  color: red;
}
```
- 链型继承
- 继承的局限性
  - 不支持：包含选择器（.one .two）或者相邻兄弟选择器（.one + .two）
  - 如果继承的元素是a，恰巧这个元素a又有hover状态的形式，那么hover状态也会被继承
- 继承交叉合并
  - 没有在同一个父级下，会产生交叉合并的编译结果
```
.one a {
  font-weight: bold;
}
.two .three {
  @extend a;
}
```
```
a span {
  font-weight: blod;
}
div .content {
  @extend span;
}
/*! 编译成*/
a span, a div .content, div a .content {
  font-weight: blod;
}
```
- 继承的作用域
- 继承在指令中是有作用域问题的，继承是无法使用在指令如（@media）之外的选择器继承的，要是继承就只能写在指令中（内外也不能重名）
占位选择器%
- 不会单独生成到css中去
- 可以定义公用的样式
- 优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用
```
%alert {
  background-color: #FFEEDD;
}
.alert-info {
  @extend %alert;
  color: red;
}
```
换肤
- disabled link
```
<link rel="stylesheet" href="skin.css" disabled>
```
- 给body设置class，使用嵌套语法

4.2 Sass进阶

数据类型
- Number
  - https://sass-lang.com/documentation/values/numbers
```
$n1: 1.2;
$n2: 12;
$n3: 12px;
```
- String
  - https://sass-lang.com/documentation/values/strings
```
$s1: container;
$s2: 'container';
$s3: "container";
```
- List
  - https://sass-lang.com/documentation/values/lists
- Map
  - https://sass-lang.com/documentation/values/maps
- Color
  - https://sass-lang.com/documentation/values/colors
```
$c1: blue;
$c2: #fff;
$c3: rgba(255, 255, 0, 0.5)
```
- Boolean
  - https://sass-lang.com/documentation/values/booleans
```
$bt: true;
$bf: false;
```
- Null
  - https://sass-lang.com/documentation/values/null
```
$null: null;
```

变量操作

== , != 支持所有数据类型
< , > , <= , >= 仅仅支持数字类型
‘+’ , ‘-’ , ‘*’ , ‘/’ , ‘%’

插值

$version: 3;
p:before {
  content: 'Hello, Sass #{$version}';
}

其他注意

/*原生css规则，不计算*/
p {
  font: 20px / 10px;
}
/*强制运算*/
p {
  height: (100px / 2);
}
/*报错*/
p {
  height: (100 / 2px);
}

Mixin

简单扩展

@mixin cont {
  color: red;
}
body {
  @include cont;
}
/*带参数*/
@mixin cont($color: red, $fontSize: 14px) {
  color: $color;
  font-size: $fontSize;
}
body {
  @include cont($fontSize: 18px);
}

传递多值参数

@mixin box-shadow($shadow...) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}
.shadows {
  @include box-shadow(0px 4px 4px #555, 2px 6px 10px #6dd3ee);
}

传递内容

@mixin style-for-iphone {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    @content;
  }
}
@include style-for-iphone {
  font-size: 12px;
}

内置函数
- https://sass.bootcss.com/documentation/modules

自定义函数

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

@debug、@warn、@error

控制台有输出

@debug 'This is a debug test';
@warn 'This is a warn test';
@error 'This is a error test';

4.3 Sass高级

条件控制

@function getzIndex($layer: default) {
  $zindexMap: (default: 1, modal: 1000, dropdown: 500);
  $zindex: 0;
  @if map-has-key($zindexMap, $layer) {
    $zindex: map-get($zindexMap, $layer);
  }
  @else {
    $zindex: 1;
  }
  @return $zindex;
}
@debug getzIndex('m');

@if

三目运算

$screenWidth: 800;
body {
  color: if($screenWidth > 768, blue, red);
}

@if…@else if…@else

$screenWidth: 800;
@if $screenWidth > 768 {
  body {
    color: red;
  }
}
@else if $screenWidth > 400 {
  span {
    color: green;
  }
}
@else {
  p {
    color: blue;
  }
}

@for

/*从1到5(包含5)*/
@for $i from 1 through 5 {
  .span#{$i} {
    width: 20% * $i;
  }
}
/*从1到5(不包含5)*/
@for $i from 1 to 5 {
  .span#{$i} {
    width: 20% * $i;
  }
}

@while

$j: 6;
@while $j > 0 {
  .p#{$j} {
    width: 20% * $j;
  }
  $j: $j - 3;
}

@each

常规遍历

$k: 1;
@each $c in blue, red, green {
  .div#{$k} {
    color: $c;
  }
  $k: $k + 1;
}

遍历List

@each $key, $color in (default, blue), (info, green), (danger, red) {
  .text-#{$key} {
    color: $color;
  }
}

遍历Map

@each $key, $value in (default: blue, info: green, danger: red) {
  .label-#{$key} {
    color: $value;
  }
}

五、结语

更多文章可访问我的github

LGD_HuaFEEng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sass学习笔记

文章目录一、工具与安装1.1 工具1.2 如何安装Sublime Text Plugins:二、Sass与Compass2.1 为什么需要css预处理器2.2 什么是Sass2.3 Sass与CSS2.4 .sass与.scss2.5 什么是Compass2.6 Sass与Compass的安装三、Sass、Less与Stylus3.1 官网3.2 安装3.3 语法四、Sass语法4.1 Sass基...
复制链接

扫一扫

专栏目录