Sass css与处理器
介绍
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
官方文档
vue3集成sass
安装sass
cnpm install sass -D
2. 在vite.config.js中添加下面代码以全局导入:
//...
export default defineConfig({
//...
css: {
preprocessorOptions: {
scss: {
additionalData: `
@use "@/styles/var.scss" as *;
`
}
}
}
})
3. 在styles目录下创建var.scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #14be05;
$warnColor: #e6a23c;
$priceColor: #cf4444;
4. 如果想在组件中使用需要在style的 lang 属性中指定
.test {
color: $warnColor;
}
基本使用
嵌套★
(1)Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。
嵌套功能避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理。 但要注意避免过度的嵌套,过度的使用嵌套会让产生的 CSS 难以维护。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
变量 $
变量用来存储需要在 CSS 中复用的信息,例如颜色和字体。SASS 通过 $ 符号去声明一个变量。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译后上面例子中变量$font-stack和$primary-color的值将会替换所有引用他们的位置。
引入 @import
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
比如我们创建一个 foo.scss,里面定义了两个变量:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
在另一个 SASS 中可以使用 @import 引入这个 scss 片断:
@import 'foo.scss';
body {
font: 100% $font-stack;
color: $primary-color;
}
编译后的最终 CSS 如下:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
混合 Mixin
混合(Mixin)用来分组那些需要在页面中复用的 CSS 声明,开发人员可以通过向 Mixin 传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用。
SASS 目前使用 @mixin name 指令来定义混合,然后使用 @include name 指令引用混合样式。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
编译为css如下:
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
继承 @extend
继承是 SASS 中非常重要的一个特性,可以通过 @extend 指令在选择器之间复用 CSS 属性,并且不会产生冗余的代码。
示例:
// 这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件,因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}
编译后如下:
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
操作符
所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式:
数字运算:SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。颜色值运算:颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值。字符串运算:+ 可用于连接字符串。布尔运算:SassScript 支持布尔型的 and、or 以及 not 运算。函数:SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用。
示例:
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
编译后:
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
父选择器 &
Scss 使用"&"关键字在 CSS 规则中引用父级选择器:
无论 CSS 规则嵌套的深度怎样,关键字"&"都会使用父级选择器级联替换全部其出现的位置。"&"必须出现在复合选择器开头的位置,后面再连接自定义的后缀。
示例:
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
编译后:
#main {
color: black;
}
#main a {
font-weight: bold;
}
#main a:hover {
color: red;
}
嵌套属性
CSS 许多属性都位于相同的命名空间(例如 font-family、font-size、font-weight 都位于 font 命名空间下),Scss 当中只需要编写命名空间一次,后续嵌套的子属性都将会位于该命名空间之下。
示例:
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译后:
.demo {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
注释 /* */与 //
Sass 除了支持标准的 CSS 多行注释 /* */,还提供了单行注释 //。前者会被完整输出到编译后的 CSS 文件中,而后者则不会。
示例:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
编译后:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
a { color: green; }
Less css预处理器
介绍
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。
因为 Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。
官网
与sass的区别
Sass和Less是两种流行的CSS预编译器。它们都提供了变量、嵌套、混合(Mixins)等高级功能,但也有一些区别。
Sass(Syntactically Awesome Style Sheets):
使用.scss或.sass文件扩展名。支持缩进语法和SCSS(Sassy CSS)语法。提供了更多的功能,如控制指令、函数、继承等。需要Ruby环境来编译,但也可以使用Node.js版本的Sass(Dart Sass)。
Less(Leaner Style Sheets):
使用.less文件扩展名。只有一种语法,类似于CSS。提供了一些Sass没有的功能,如Guard表达式和JavaScript表达式。需要Node.js环境来编译。 在Vue 3开发中,选择Sass或Less取决于个人或团队偏好以及项目需求。以下是一些建议:
如果你或你的团队已经熟悉Sass或Less,并且项目中已经使用了其中之一,那么继续使用它可能是最佳选择。如果你需要更多的功能和灵活性,Sass可能是更好的选择。它提供了更多的功能和控制,可以更好地处理复杂的项目。如果你希望保持与CSS相似的语法,或者项目中已经使用了Node.js,那么Less可能更适合你。
基本步骤
在 Vue 3 项目中使用 Less CSS 预处理器,你可以按照以下步骤操作:
安装依赖
首先,你需要安装 less 和 less-loader。如果你使用的是 Vue CLI 创建的项目,你可以通过以下命令安装:
npm install less less-loader --save-dev
# 或者
yarn add less less-loader --dev
配置
Vue CLI
如果你的项目是通过 Vue CLI 创建的,那么 less-loader 应该已经与 Webpack 集成好了。但是,如果你遇到了问题,可以检查 vue.config.js 文件,确保有正确的配置。通常情况下,默认配置应该就可以了,但如果需要,你可以添加或修改以下配置:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
//Vue CLI 对所有依赖项进行转译。这意味着即使它们是第三方库,也会通过 Babel 转换,以便使用新的 JavaScript 特性。
transpileDependencies: true,
css: {
loaderOptions: {
less: {
// 这里可以添加 Less 配置选项
// 确保在编译时始终进行数学运算,即使在无法确定单位时也是
math: "always",
// 定义全局变量,这些变量可以在所有的 Less 文件中使用,而无需单独导入
globalVars:{
blue:"#1CC0FF"
}
}
}
}
})
Vite
//vite.config.js
export default defineConfig({
css: {
// css模块化配置项
modules:{
// ....
}
// 预处理器配置项
preprocessorOptions: {
less: {
// 一些配置项
}
}
}
})
在 Vue 组件中使用 Less
现在你可以在 Vue 组件中直接使用 Less 语法了。例如:
const msg = "Hello Vue 3!"
{{ msg }}
.hello {
h1 {
color: blue;
&:hover {
color: green;
}
}
}
在上面的例子中,