SASS学习笔记（附练习代码和环境配置）

最新推荐文章于 2024-05-20 13:07:09 发布

二琳爱吃肉

最新推荐文章于 2024-05-20 13:07:09 发布

阅读量346

点赞数

分类专栏： sass 文章标签： sass 前端

本文链接：https://blog.csdn.net/weixin_45906196/article/details/119451718

版权

sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS预处理器

Sass是一种CSS预处理器，与css3语法基本一致。

CSS预处理器定义了一种新的语言，它作为一种专门的编程语言，给CSS增加了新的一些编程特性，将CSS作为目标生成文件，开发者可以使用这种语言去进行编码工作。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML （一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。

Sass的优点

可以在CSS中使用变量、简单的逻辑程序、函数等基本特性。
可以让我们的CSS更加简洁、适应性更强、可读性更好、更便于代码的维护等。

Sass和SCSS

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

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

Sass配置

在https://www.sass.hk中安装
vscode 可以在拓展中安装easy sass进行配置

基础知识

css的四种输出格式

vscode中easysass配置css输出格式的方法：设置-用户-拓展-easysass-formats
在这里插入图片描述

嵌套输出格式 nested
展开输出格式 expanded
紧凑输出格式 compact
压缩输出格式 compressed

定义变量

用$符定义变量

// $定义变量
$bgColor: #ff8907;
$whiteColor: #fff;
$keyname: color;

注释

单行注释 // 编译后不显示
多行注释/**/ 编译后css文件保留注释
强制注释/！/ 压缩后的文件会保留

嵌套

选择器的嵌套

用&符引用父选择器
.scss

// & 引用父选择器
  &-inner{
    color: $bgColor;
  }

.css

#list-inner {
  color: #ff8907;
}

属性嵌套

eg: padding属性的嵌套

p{
      // padding: 10px;
      // padding-top: 30px;
      // padding-left: 20px;
      // 属性的嵌套（在编译器里熟悉的嵌套 ':' 和 '{' 之间要加一个空格）
      padding: {
        top: 40px;
        bottom: 30px
      };
    }

mixin混合宏

用于定义可重复使用的样式，避免了使用无语意的 class
.scss

// 定一个混合宏 通过@minin name()定义
// 定义时可以带有参数，参数可以设置默认值
@mixin orange-btn($width:100px, $height:40px) {
  width: $width;
  height: $height;
  line-height: $height;
  text-align: center;
  border-radius: 5px;
  color: $whiteColor;
  background: $bgColor;
}

.login-btn{
  // 调用混合宏 通过@include name() 调用
  @include orange-btn();
}
.register-btn{
  // 调用混合宏 传参 可以指定参数的名字和值（在不确定混合宏参数的顺序时）
  @include orange-btn($height:10px,$width:30px);
}
.submit-btn{
  // 调用混合宏 传参 
  @include orange-btn(50px, 20px);
}

.css

.login-btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

.register-btn {
  width: 30px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

.submit-btn {
  width: 50px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

extend&import

.sass

.wrapper{
  width: 100px;
  height: 30px;
  font-size: 20px;

  .inner{
    // @extend 继承某一个选择器的样式
    // 如果继承的选择器有子选择器会一并继承过来
    // 编译时 会将相同的样式转换成分组选择器
    @extend .wrapper;
    padding: 20px;
  }
}

#main{
  @extend .wrapper;
  margin: 20px;
}

.css

.wrapper, .wrapper .inner, #main {
  width: 100px;
  height: 30px;
  font-size: 20px;
}

.wrapper .inner, #main .inner {
  padding: 20px;
}

#main {
  margin: 20px;
}

数值运算

数字运算：+ - * / ()
绝对值： abs(-10px)
四舍五入：round(5.5)
向上取整：ceil(5.5)
向下取整：floor(5.5)
百分比：percentage(30px / 100px)
最小值： min(1,2,3)
最大值：max(1,2,3)

函数

// @function 定义函数
@function changeWidth($width) {
  @return $width * 2;
}

list列表

值列表是通过空格或者逗号分隔的一系列的值

列表长度：length(5px 10px)
返回索引：index(1px solid #000, solid)
取出索引对应的值：nth(5px 10px,2)
列表后面追加值：append(5px 5px, 10px)
合并列表：join(5px 5px, 10px 10px, comma(逗号分隔))

控制指令

@if @else if @else
@for $i from 开始 through 结束{}
@for $i from 开始 to结束{}
@each $var in $list{}
@while $i{}

.scss

$length: 22;
// @if指令（与js中的if效果相同）
// sass中的逻辑判断 and or not
li{
  @if $length < 0 {
    font-size: 12px;
  } @else if $length > 0 and $length <= 5 {
    font-size: 14px;
  } @else {
    font-size: 16px;
  }
}

// @for 类似于js中的for循环
// from start through end 从start到end 包括end
// from start to end 从start到end 不包括end
@for $i from 1 through 3 {
  .list-#{$i} {
    width: $i * 100px;
  }
} 

@for $i from 1 to 3 {
  .text-#{$i} {
    width: $i * 100px;
  }
}

// $colorlist: red, blue, green, pink;
// @each in 循环一个列表
@each $var in $colorlist {
  .content-#{$var} {
    color: $var;
  }
}

$i: 6;
// @while 类似于 js中的while循环
@while $i > 0 {
  .item-#{$i} { 
    width: 2em * $i; 
  }
  $i: $i - 2;
}

逻辑符号

and，or，not

颜色

rgb() rgba()

更浅：lighten($color, 20%)
更深：darken($color, 20%)
更不透明：opacify($color, 0.3)
更透明：transparentize($color, 0.3)

字符串

字符串拼接： +
大小写转换：to-upper-case($ var), to-lower-case($var)
字符串长度：str-length($var)
索引1开始：str-index($ target,$str)
插入：str-insert($ var,$inserStr,index)

map

 $m: (light: #000, dark: #fff);
color: map-get($ m, light);//获取val

返回所有key：map-keys($ m);
返回所有value：map-values($ m);
判断是否包含key：map-has-key($ m, light);
合并map：map-merge($ m, (gray: #ccc))
移除： map-remove($ m, light, dark);

练习代码

.scss文件

// 引入外部的scss文件
@import './reset.scss';

// 单行注释 编译后的css文件不会保留
// $定义变量
$bgColor: #ff8907;
$whiteColor: #fff;
$keyname: color;

/*
  div 元素
  多行注释 编译后，css文件会保留
*/
/*!
  强制注释，压缩的文件会保留
*/
div{
  // width: 100px;
  width: 2rem;
  // #{变量} 差值语句，属性名如果是变量可以使用这种方式书写
  #{$keyname}: $bgColor;
  background: $bgColor;
}

// 选择器的嵌套
#list{
  width: 100px;
  height: 20px;

  li{
    font-size: 20px;

    p{
      // padding: 10px;
      // padding-top: 30px;
      // padding-left: 20px;
      // 属性的嵌套（在编译器里熟悉的嵌套 ':' 和 '{' 之间要加一个空格）
      padding: {
        top: 40px;
        bottom: 30px
      };
    }
  }
  // & 引用父选择器
  &-inner{
    color: $bgColor;
  }
}

.link{
  color: $bgColor;

  &:hover{
    color: #000;
  }
}

// .login-btn{
//   width: 100px;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgColor;
// }

// .submit-btn{
//   width: 50px;
//   height: 20px;
//   line-height: 20px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgColor;
// }

// 定一个混合宏 通过@minin name()定义
// 定义时可以带有参数，参数可以设置默认值
@mixin orange-btn($width:100px, $height:40px) {
  width: $width;
  height: $height;
  line-height: $height;
  text-align: center;
  border-radius: 5px;
  color: $whiteColor;
  background: $bgColor;
}

.login-btn{
  // 调用混合宏 通过@include name() 调用
  @include orange-btn();
}
.register-btn{
  // 调用混合宏 传参 可以指定参数的名字和值（在不确定混合宏参数的顺序时）
  @include orange-btn($height:10px,$width:30px);
}
.submit-btn{
  // 调用混合宏 传参 
  @include orange-btn(50px, 20px);
}

.wrapper{
  width: 100px;
  height: 30px;
  font-size: 20px;

  .inner{
    // @extend 继承某一个选择器的样式
    // 如果继承的选择器有子选择器会一并继承过来
    // 编译时 会将相同的样式转换成分组选择器
    @extend .wrapper;
    padding: 20px;
  }
}

#main{
  @extend .wrapper;
  margin: 20px;
}

$width: 5rem;

.content{
  // width: $width - 3;
  width: percentage(30px/100px);
  height: abs(-10px);
}

// @function 定义函数
@function changeWidth($width) {
  @return $width * 2;
}

// 列表(用空格分隔)
$list: 1px solid #000;

div{
  // 调用函数
  width: changeWidth(30px);
  border-bottom: $list;
}

section{
  border-bottom: 1px solid #000;
}

// 列表(用逗号分隔)
$colorlist: red, blue, green, pink;

p{
  // nth($list,index)通过索引获取$list列表里的第index项 
  color: nth($colorlist, 2);
}

$length: 22;
// @if指令（与js中的if效果相同）
// sass中的逻辑判断 and or not
li{
  @if $length < 0 {
    font-size: 12px;
  } @else if $length > 0 and $length <= 5 {
    font-size: 14px;
  } @else {
    font-size: 16px;
  }
}

// @for 类似于js中的for循环
// from start through end 从start到end 包括end
// from start to end 从start到end 不包括end
@for $i from 1 through 3 {
  .list-#{$i} {
    width: $i * 100px;
  }
} 

@for $i from 1 to 3 {
  .text-#{$i} {
    width: $i * 100px;
  }
}

// $colorlist: red, blue, green, pink;
// @each in 循环一个列表
@each $var in $colorlist {
  .content-#{$var} {
    color: $var;
  }
}

$i: 6;
// @while 类似于 js中的while循环
@while $i > 0 {
  .item-#{$i} { 
    width: 2em * $i; 
  }
  $i: $i - 2;
}

$imgname: 'xxx.png';
div{
  // to-upper-case($var) 将变量$var对应的值转换成大写
  // to-lower-case($var) 将变量$var对应的值转换成小写
  background: url('./images/#{to-upper-case($imgname)}');
}

.css文件

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-align: none;
}

body {
  font-size: 14px;
  background: #eee;
}

/*
  div 元素
  多行注释 编译后，css文件会保留
*/
/*!
  强制注释，压缩的文件会保留
*/
div {
  width: 2rem;
  color: #ff8907;
  background: #ff8907;
}

#list {
  width: 100px;
  height: 20px;
}

#list li {
  font-size: 20px;
}

#list li p {
  padding-top: 40px;
  padding-bottom: 30px;
}

#list-inner {
  color: #ff8907;
}

.link {
  color: #ff8907;
}

.link:hover {
  color: #000;
}

.login-btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

.register-btn {
  width: 30px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

.submit-btn {
  width: 50px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 5px;
  color: #fff;
  background: #ff8907;
}

.wrapper, .wrapper .inner, #main {
  width: 100px;
  height: 30px;
  font-size: 20px;
}

.wrapper .inner, #main .inner {
  padding: 20px;
}

#main {
  margin: 20px;
}

.content {
  width: 30%;
  height: 10px;
}

div {
  width: 60px;
  border-bottom: 1px solid #000;
}

section {
  border-bottom: 1px solid #000;
}

p {
  color: blue;
}

li {
  font-size: 16px;
}

.list-1 {
  width: 100px;
}

.list-2 {
  width: 200px;
}

.list-3 {
  width: 300px;
}

.text-1 {
  width: 100px;
}

.text-2 {
  width: 200px;
}

.content-red {
  color: red;
}

.content-blue {
  color: blue;
}

.content-green {
  color: green;
}

.content-pink {
  color: pink;
}

.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

div {
  background: url("./images/XXX.PNG");
}

二琳爱吃肉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
SASS学习笔记（附练习代码和环境配置）

CSS预处理器sass是一种CSS预处理器，与css3语法基本一致。CSS预处理器定义了一种新的语言，它作为一种专门的编程语言，给CSS增加了新的一些编程特性，将CSS作为目标生成文件，开发者可以使用这种语言去进行编码工作。
复制链接

扫一扫