sass笔记

最新推荐文章于 2022-04-22 13:59:37 发布
原创 最新推荐文章于 2022-04-22 13:59:37 发布 · 432 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#sass #scss #前端

sass笔记

文章目录

sass 和scss

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(?，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

转换

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

命令

gem update sass //更新

编译

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

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

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

调试

只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“–sourcemap” 参数：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css

不同样式风格的输出方法

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

  1. 嵌套输出方式 nested

    nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

  2. 展开输出方式 expanded

    nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

  3. 紧凑输出方式 compact

    nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

  4. 压缩输出方式 compressed

    nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

SASS语法基础

$btn-primary-color: #aaa //覆盖默认变量
$btn-primary-color : #fff !default; //为默认变量

全局变量与局部变量

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

嵌套

选择器嵌套
属性嵌套
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}
伪类嵌套
.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

混合宏@mixin @include

声明

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

调用

button {
    @include border-radius;
}

传参

1.传无值变量

@mixin border-radius($radius){  
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
button {
    @include border-radius(5px);
}

2.传有值

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
button {
    @include border-radius;
}

3.传多变量

@mixin size(width,height){
  width: $width;
  height: $height;
}

.box-center {
  @include size(500px,300px);
}

继承@extend

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

占位符 %placeholder

解决代码冗余问题

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}


//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

img

插值#{}

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

注释

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”

2、类似 JavaScript 的注释方式，使用“//”

数据类型

  • 数字: 如，1， 10px；

  • 字符串：有引号字符串或无引号字符串，如，"foo“、 baz；

  • 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

  • 布尔型：如，true、 false；

  • 空值：如，null；

  • 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

    nth函数（nth function） 可以直接访问值列表中的某一项；
join函数（join function） 可以将多个值列表连结在一起；
append函数（append function） 可以在值列表中添加值； 
@each规则（@each rule） 则能够给值列表中的每个项目添加样式。

    (1px 2px) (5px 6px)与 1px 2px 5px 6px一样

sass运算

加减法

在变量或属性中都可以做运算。如：

.box {
  width: 20px + 8px;
}

乘法

.box {
  width: 10px * 2;  //width:10px * 2px;   错，还不可以单位不一样
}

除法

”/ ”符号被当作除法运算符时有以下几种情况：

• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

• 如果数值被圆括号包围。

• 如果数值是另一个数学表达式的一部分。

.box {
  width: (1000px / 100px);
}
.box {
  width: 10;
}

颜色运算

p {
  color: #010203 * 2;
}
p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

如此编译出来的 CSS 为：

p {
  color: #050709;
}

Sass的语句

if
//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
for
@for $i from <start> through <end>
@for $i from <start> to <end>


for $i from 1 through 3{
	item-#{$i}{
		width:2em * $i
	}
}
while
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
each
@each $var in <list>

函数

  • 字符串函数
  • 数字函数
  • 列表函数
  • 颜色函数
  • Introspection 函数
  • 三元函数等

字符串函数

  • unquote($string)：删除字符串中的引号；//只能删除开头结尾引号
  • quote($string)：给字符串添加引号。
  • to-upper-case()
  • to-lower-case()

数字函数

  • ​ percentage($value)：将一个不带单位的数转换成百分比值；

  • ​ round($value)：将数值四舍五入，转换成一个最接近的整数；

  • ​ ceil($value)：将大于自己的小数转换成下一位整数；

    ceil(2.1)
3

  • ​ floor($value)：将一个数去除他的小数部分；

  • ​ abs($value)：返回一个数的绝对值；

  • ​ min($numbers…)：找出几个数值之间的最小值

    >> min(1,2,1%,3,300%)
1%
>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

  • ​ max($numbers…)：找出几个数值之间的最大值；

  • ​ random(): 获取随机数

列表函数

  • ​ length($list)：返回一个列表的长度值

    >> length(border 1px solid)
3
length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错：

  • ​ nth($list, $n)：返回一个列表中指定的某个标签值

    nth($list,$n)

  • ​ join($list1, l i s t 2 , [ list2, [ list2,[separator])：将两个列给连接在一起，变成一个列表；

    $separator auto ，comma 值,分隔，space 空格分隔。

    join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
join(blue,(red orange),comma)
(#0000ff, #ff0000, #ffa500)

  • ​ append($list1, v a l , [ val, [ val,[separator])：将某个值放在列表的最后；

    append((blue green),red,comma)
(#0000ff, #008000, #ff0000)

  • ​ zip($lists…)：将几个列表结合成一个多维的列表；

    zip()函数中每个单一列表的值对应的取其相同位置值

    >> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

  • ​ index($list, $value)：返回一个值在列表中的位置值。

    index(1px solid red, 1px)
1

Introspection函数

  • type-of($value)：返回一个值的类型

    >> type-of(1 / 2 = 1)
"string"

  • unit($number)：返回一个值的单位,只能乘除，不能加减

    >> unit(10px * 2em / 3cm / 1rem)
"em/rem"

  • unitless($number)：判断一个值是否带有单位，不带单位返回的值为 true，带单位返回的值为 false：

  • comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

Miscellaneous函数

if($condition,$if-true,$if-false)
>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

map

更好管理样式，将同种类的放入一个map中

$color: (
    default: #fff,
    primary: #22ae39
);

  • map-get( m a p , map, map,key)：根据给定的 key 值，返回 map 中相关的值。

    $social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

  • map-merge( m a p 1 , map1, map1,map2)：将两个 map 合并成一个新的 map。

  • map-remove( m a p , map, map,key)：从 map 中删除一个 key，返回一个新 map。

  • map-keys($map)：返回 map 中所有的 key。

    "dribble","facebook","github","google","twitter"

  • map-values($map)：返回 map 中所有的 value。

  • map-has-key( m a p , map, map,key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

  • keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

    @mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);


{"asId":7,"success":true,"ascontentList":[{"asId":7,"titleId":1,"asTitle":"教师考勤","asContent1":"经常迟到","asContent2":"偶尔迟到","asContent3":"较少迟到","asContent4":"从未缺勤","asContent5":null,"assess":null},{"asId":7,"titleId":2,"asTitle":"体能状况","asContent1":"身体素质差","asContent2":"身体素质较差","asContent3":"身体素质一般","asContent4":"身体素质较好","asContent5":"身体素质优异","assess":null},{"asId":7,"titleId":3,"asTitle":"讲课效率","asContent1":"效率极差","asContent2":"效率一般","asContent3":"效率较好","asContent4":"效率优异","asContent5":null,"assess":null},{"asId":7,"titleId":4,"asTitle":"教学质量是否合格","asContent1":"不合格","asContent2":"及格","asContent3":"优异","asContent4":null,"asContent5":null,"assess":null}]}


http://www.alccc.top/jsbo3o/assessadmin/getascontentlist


<!--教师名片-->
<view class="bg"></view>
<view class="tea-card-wraper">
  <view class="avarta-text">
    <view class="tea-avarta-wraper">
      <view class="tea-avarta-border">
        <image src="../../img/avarta.jpg"></image>
      </view>
    </view>
    <text class="info">
      <text class="name">王鹏</text>\nxx班主任</text>
  </view>
  <image src="../../img/back.png"></image>
</view>
<!--/教师名片-->
<!--评价表-->
  <view class="comment-list-wraper">
    <view class="title">
      2016-2017学年第二学期评价
    </view>
    <van-checkbox-group value="{{ result }}" bind:change="onChange">
    <!--lei-->
      <view class="lei">
        <view class="lei-title">
          思想品德
          <view class="line"></view>
        </view>
        <view class="select-wraper">
          <view class="select-raw"
                wx:for="{{ list1 }}">
              <van-checkbox wx:key="index" name="{{ item }}" checked-color="#19d4af">
                {{ item }}
              </van-checkbox>
          </view>
        </view>
      </view>
      <!--/lei-->
      <!--lei-->
      <view class="lei">
        <view class="lei-title">
          工作能力
          <view class="line"></view>
        </view>
        <view class="select-wraper">
          <view class="select-raw"
                wx:for="{{ list2 }}">
              <van-checkbox wx:key="index" name="{{ item }}" checked-color="#19d4af">
                {{ item }}
              </van-checkbox>
          </view>
        </view>
      </view>
      <!--/lei-->
      <!--lei-->
      <view class="lei">
        <view class="lei-title">
          出勤情况
          <view class="line"></view>
        </view>
        <view class="select-wraper">
          <view class="select-raw"
                wx:for="{{ list3 }}">
              <van-checkbox wx:key="index" name="{{ item }}" checked-color="#19d4af">
                {{ item }}
              </van-checkbox>
          </view>
        </view>
      </view>
      <!--/lei-->
      <!--lei-->
      <view class="lei">
        <view class="lei-title">
          工作实绩
          <view class="line"></view>
        </view>
        <view class="select-wraper">
          <view class="select-raw"
                wx:for="{{ list4 }}">
              <van-checkbox wx:key="index" name="{{ item }}" checked-color="#19d4af">
                {{ item }}
              </van-checkbox>
          </view>
        </view>
      </view>
      <!--/lei-->
    </van-checkbox-group>
    <!--输入框-->
    <textarea 
    auto-focus="true" 
    class="shuru" 
    placeholder="请认真填写评语！"/>
    <!--/输入框-->
  </view>
<!--/评价表-->

<!--按钮-->
<button class="btn">提交</button>
Sass总结笔记 基础入门（超级直观细节）
你好呀，很高兴你在看这里~
01-27 8306
一.什么是sass： Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像，几乎一样)，因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简
sass学习笔记
devJan的博客
06-07 221
变量 规则嵌套 1. 变量 变量声明 声明方式 应用场景 $color: red; 赋于一个值 $border: 1px solid #ccc; 声明一个border简写属性值 $font-family: ‘宋体’, ‘微软雅黑’ 声音一个字体系列， 用逗号分隔 任何css属性值都可用于变量值 变量调用 声明一个颜色为红色的变量： $color: red; 调用变量 body{ color: $color; } 在任何地方有需要使用的变量的地方都可以调用 ,.
Sass学习
qq_43817164的博客
06-17 236
SassScript 在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。 弱类型语言, 对语法要求没那么严格 一、注释 Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。 插值语句 (in
Sass学习笔记
weixin_30851867的博客
11-21 159
阅读目录 一. Sass安装 1.1 Ruby安装 1.2 运行gem命令 1.3 安装Sass 二. Sass基本用法 2.1 导入 2.2 注释 2.3 变量 2.4 嵌套 2.5 继承 2.6 占位符 2.7 混合宏 三. Sass编程 3.1 数学计算 3.2 条件 ...
Sass笔记
u012864281的博客
12-19 256
Sass 是成熟、稳定、强大的css预处理器，而SCSS 是Sass 3版本当中引入的新语法特性，完全兼容css3的同时继承了sass强大的动态功能。在规模较大的web引用中，使用css容易造成选择器层叠的复杂度过高，因此推荐通过Sass预处理器进行开发。 Sass特性：变量、嵌套、混合、继承等。 SCSS 特点：需要使用分号和花括号而不是换行和缩进；SCSS 对空白符号不敏感。 变量...
Sass学习笔记-Sass快速入门04
01-08
文章目录一、Map与相关函数1.1定义Map类型数据1.2 map-get(参数1，参数2) 可以根据键来得到值1.3 map-keys(参数1) 返回对象当中的所有key1.4 map-values(参数1) 返回对象当中所有的value1.5 map-has-key(参数1,参数2...
Sass学习笔记.md
09-14
Sass学习笔记.md
2018-07-27 SASS使用笔记_web_1
08-03
SASS，全称为Syntactically Awesome Style Sheets，是一种CSS预处理器，它为CSS提供了更强大的功能和组织结构，使得CSS编写更加简洁、模块化。本文将深入探讨SASS的几个核心特性，包括注释、导入、变量定义、嵌套、...
Sass入门学习笔记
03-08
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、...
07-Sass语法学习笔记.md
最新发布
09-01
07-Sass语法学习笔记
sass笔记（一）
fan2016434589的博客
04-22 238
1、body.ie 举例来说，当用户在使用IE浏览器时，你会通过JavaScript在<body>标签上添加一个ie的类名，为这种情况编写特殊的样式如下 #content aside { color: red; body.ie & { color: green } } /*编译后*/ #content aside {color: red}; body.ie #content aside { color: green } 2、属性嵌套 nav { border:
Sass 学习笔记
紫一的博客
03-30 236
Sass 学习笔记 Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。 一. CSS 功能扩展 1.嵌套规则 #main p { color: #00ff00; width: 97%;
Sass的学习笔记
weixin_42670523的博客
09-19 347
一．Sass介绍 Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配Compass 样式库一同使用时。 二．Sass的特色 完全兼容 CSS3 在 CSS 语言基础上添加了扩展功能...
sass简要笔记
@蟹卷的博客
09-28 352
sass安装使用 使用vscode，下载Easy Sass插件 创建.scss文件，可在其内部写sass代码，会自动编译成css文件 然后在HTML文件中引入该css文件即可 sass官方文档 嵌套 内层的样式将它外层的选择器作为父选择器 #main { width: 97%; p, div { font-size: 2em; a { font-weight: bol...
前端开发笔记：HTML+CSS+SASS+JS核心概念解析
Sass是一种CSS预处理器，能够增加CSS的功能，如变量、嵌套规则、混合、函数等，使得CSS编写更加简洁和可维护。 **MVC模式** (Model-View-Controller) 是一种常见的软件设计模式，尤其在后端Web程序中广泛使用。在这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值