Scss学习笔记，持续记录

Scss起步

1.Ruby安装

1. gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
2. gem install sass
3. gem install compass
4. 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 的镜像源,这里以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 语法格式

.scss.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-sassstyle.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;
}

@import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@extend 

.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};
}