Scss学习笔记，持续记录

房东的狗丶

发布于 2023-02-17 14:06:12

9290

发布于 2023-02-17 14:06:12

文章被收录于专栏：友人a的笔记丶友人a的笔记丶

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

提示

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

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
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 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/
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};
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-01-04，如有侵权请联系 cloudcommunity@tencent.com 删除

打包