Scss学习笔记,持续记录
- CSS笔记
- 2022-01-04
- 1315热度
- 0评论
Scss起步
相关文档:https://www.sass.hk/docs/
1.Ruby安装
- 下载Ruby:https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-3.1.0-1/rubyinstaller-3.1.0-1-x64.exe
- gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
- gem install sass
- gem install compass
- sass -v (查看当前版本)
2.Node安装
# 全局安装
npm i node-sass -g
#使用
node-sass 源文件 目标文件 -w --output-style compressed
PHPStorm配置FileWatcher:
node-sass $FilePath$ $FileDir$/$FileNameWithoutAllExtensions$.css
提示
node-sass需要python环境,可以选择手动安装python或者安装node的同时安装附带的编译工具
// 对应的包管理工具设置node-sass 的镜像源,这里以npm为例
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
// 重新安装node-sass包
npm install node-sass
3.编译sass
//单文件转换命令
node-sass input.scss output.css
//单文件监听命令
node-sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
node-sass --watch app/sass:public/stylesheets
基础知识
1.Sass 语法格式
- Sass 有两种语法格式。
- SCSS (Sassy CSS) 这种格式仅在 CSS3 语法的基础上进行拓展,所有 CSS3 语法在 SCSS 中都是通用的,同时加入 Sass 的特色功能,以
.scss
作为拓展名。 - 另一种也是最早的 Sass 语法格式,被称为缩进格式 (Indented Sass) 通常简称 "Sass",是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性,以
.sass
作为拓展名。
2.Sass 编排格式
nested 编译排版格式
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式
/*命令行内容*/
node-sass
style.scss:style.css --style expanded /*编译过后样式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
compact 编译排版格式
/*命令行内容*/
node-sass
style.scss:style.css --style compact /*编译过后样式*/ .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式
/*命令行内容*/
node-sass
style.scss:style.css --style compressed /*编译过后样式*/ .box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
文档阅读笔记
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
Sass 拓展了 @import
的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@extend
的作用是将重复使用的样式extend) (.error) 延伸 (给需要包含这个样式的特殊样式(.seriousError)
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
@if、@else、@elseif、@for、@each、@while
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
@mixin和@include类似函数声明和函数调用。
scss函数
1.默认参数
@mixin scroll($height:10px,$width:10px) {
/* 滚动条样式 */
&::-webkit-scrollbar {
-webkit-appearance: none;
background: transparent;
width: $width !important;
height: $height !important;
}
}
css转scss
基于工具:https://csspre.com/convert/、http://css2sass.herokuapp.com/
问题总结
1.scss不转换
今天遇到自定义的css变量中,使用scss变量或者函数是,不会被编译(例如rgba函数、或者一个变量编译成css后没有变化)。
最终的解决办法就是使用插值语法。我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式;
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
// 应用于 class 和属性
.border-#{$borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
}
// 应用于复杂的属性值
body {
font:#{$baseFontSize}/#{$baseLineHeight};
}