基础Sass入门学习使用

Serendipity261
159 阅读4分钟

theme: cyanosis

一、安装使用

通过 npm 全局安装的 Sass

1、首先安装好nodejs,并配置好环境变量

2、安装sass. 命令行输入npm install sass

二、使用sass

一旦你在项目中成功安装了 Sass，你可以按照以下步骤来使用它

1、在你的项目目录中创建一个新的 .sass/.scss 文件

2、打开你创建的 Sass 文件，并在其中编写 Sass 代码

3、编译 Sass 文件为 CSS：使用 Sass 提供的命令行工具或构建工具（如 webpack、Gulp 等），将其编译为普通的 CSS 文件，以便在浏览器中使用

如果你想使用 Sass 的命令行工具，可以在命令行中运行以下命令来编译 Sass 文件
sass input.scss output.css

其中 input.scss 是你的 Sass 文件路径，output.css 是要生成的 CSS 文件路径。根据你的实际情况进行相应的替换

监视单个 Sass 文件，每次修改并保存时自动编译
sass --watch input.scss:output.css //监视单个 Sass 文件，每次修改并保存时自动编译
sass --watch app/sass:public/stylesheets//监视整个文件夹
如果你使用的是构建工具，例如 webpack，你可以配置相应的加载器（loader）来编译 Sass 文件。具体配置方式取决于你使用的构建工具和相应的加载器

4、在 HTML 文件中引入编译后的 CSS 文件

<link rel="stylesheet" href="path/to/compiled.css">

三、sass语法

嵌套规则

//嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为css

#main p {
  color: #00ff00;
  width: 97%;
  }
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
  }

父选择器 &

//`&` 代表嵌套规则外层的父选择器
a {
  font-weight: bold;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
  &-sidebar { border: 1px solid; }
}

编译为css

a {
  font-weight: bold;
 }
a:hover {
    text-decoration: underline;
 }
body.firefox a {
    font-weight: normal;
 }
#main-sidebar {
    border: 1px solid; }

属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
.fun {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为css

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
  }
.fun {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

占位符选择器 %foo

//提高代码的可重性
%foo{
color:red;}
.bar{
@extend %foo; //调用
background-color:yellow;}

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

.bar{
color:red;
background-color:yellow;}

SassScript

1、Interactive Shell
在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
2、变量 $
$width: 5em;
#main {
  width: $width;
}

将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

编译为css

#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

//1、Sass 中，字符串可以使用单引号或双引号括起来
$font-family: 'Helvetica Neue', Arial, sans-serif;
//2、使用插值语法将变量嵌入到字符串中
$color: blue;
.element {
  content: "This is a #{$color} text.";
}
//3、支持使用反斜杠来转义特殊字符
.icon {
  content: "\f002";//`\f002` 表示 Unicode 字符编码，用于表示字体图标
}
3、Lists数组
$list1: value1, value2, value3;//Sass 中创建 List
$list2: value4, value5;
$value: nth($list1, 2); // 从 1 开始计数，$value 的值是 value2
$joinedList: join($list1, $list2, comma); // $joinedList 的值是 value1, value2, value3, value4, value5
$appendedList: append($list1, value4); // $appendedList 的值是 value1, value2, value3, value4
$index: index($list1, value2); // $index 的值是 2

Sass 还提供了一些方便的 List 操作函数，例如：

  • length($list)：返回 List 中的值的数量。
  • join($list1, $list2, $separator)：将两个 List 合并为一个 List，可选地使用 $separator 分隔符。
  • append($list, $value, $separator)：将一个值添加到 List 的末尾，可选地使用 $separator 分隔符。
  • index($list, $value)：返回指定值在 List 中的索引，如果不存在则返回 null。
4、Maps
$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  danger: #dc3545,
  warning: #ffc107,
  info: #17a2b8,
  light: #f8f9fa,
  dark: #343a40
);
.btn-primary {
  background-color: map-get($colors, primary);
  color: #fff;
}
Sass 提供了一系列的 Maps 相关函数，例如 map-get()、map-merge()、map-remove() 等
可以查阅相关文档使用这些函数对 Maps 进行操作和处理
5、Color操作
lighten($color, $amount)：增加颜色的亮度。
其中 $color 是要处理的颜色，$amount 是要增加的亮度值（取值范围为 0% 到 100%）。
示例：$new-color: lighten($color, 20%);

darken($color, $amount)：减少颜色的亮度。
其中 $color 是要处理的颜色，$amount 是要减少的亮度值（取值范围为 0% 到 100%）。
示例：$new-color: darken($color, 20%);

saturate($color, $amount)：增加颜色的饱和度。
其中 $color 是要处理的颜色，$amount 是要增加的饱和度值（取值范围为 0% 到 100%）。
示例：$new-color: saturate($color, 20%);

desaturate($color, $amount)：减少颜色的饱和度。其中 $color 是要处理的颜色，$amount 是要减少的饱和度值（取值范围为 0% 到 100%）。
示例：$new-color: desaturate($color, 20%);

adjust-hue($color, $degrees)：调整颜色的色相。
其中 $color 是要处理的颜色，$degrees 是要调整的角度（取值范围为 -360deg 到 360deg）。
示例：$new-color: adjust-hue($color, 90deg);

mix($color1, $color2, $weight)：混合两个颜色。
其中 $color1 和 $color2 是要混合的颜色，$weight 是第二个颜色在混合结果中所占的权重（取值范围为 0% 到 100%）。
示例：$new-color: mix($color1, $color2, 50%);

complement($color)：计算颜色的补色。
示例：$new-color: complement($color);

invert($color)：计算颜色的反色。
示例：$new-color: invert($color);
6、运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

p {
  font: 10px/8px;             
  $width: 1000px;
  width: $width/2;            
  width: round(1.5)/2;        
  height: (500px/2);         
  margin-left: 5px + 8px/2px; 
}

@-Rules

1、@import
//导入单个文件
@import "foo.scss";或
@import "foo";

//Sass 允许同时导入多个文件
@import "rounded-corners", "text-shadow";

//使用 `#{ }` 插值语句，作用于 CSS 的 `url()` 导入方式
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
2、分音 (Partials)

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线

3、嵌套 @import
.example {
  color: red;
}
 #main {
  @import "example";
}

//编译成
#main .example {
  color: red;
}
avatar
文章
阅读
粉丝