sass基本使用

最新推荐文章于 2024-09-09 10:39:33 发布
原创 最新推荐文章于 2024-09-09 10:39:33 发布 · 373 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了Sass的基本用法，包括如何定义和使用带默认值的变量，创建及调用混合器（mixin），以及利用@extend实现选择器继承以简化CSS代码。通过这些特性，Sass能够提升CSS的组织效率和可维护性。

1、变量定义 !default
在这里插入图片描述
在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值
变量是 null 空值时将视为未被 !default 赋值
在这里插入图片描述
2、混合器
在这里插入图片描述
用@mixin 定义内容 用 @include 调用内容

编译后
在这里插入图片描述
混合器也支持基本语法
在这里插入图片描述
给混合器传参
在这里插入图片描述
混合器可以像方法一样传参 、翻译后
在这里插入图片描述
3、使用选择器继承来精简CSS
在这里插入图片描述
用 @extend 继承
编译后
在这里插入图片描述

lgrrrr
关注
Sass 使用指南：让 CSS 编程更高效、更强大
读心悦
06-08 743
Sass 是一种强大的 CSS 预处理器，通过它，你可以编写更简洁、更易于维护的样式代码。在本文中，我们介绍了 Sass 的基本语法和最佳实践，帮助你快速上手 Sass 并提高你的 CSS 编程效率。通过不断学习和实践，你将能够充分利用 Sass 的功能，为你的项目创建出优雅、高效的样式。
sass 使用指南
kang_k的博客
03-17 1098
Sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。sass有2种语法：1.一种是以sass后缀，对代码的排版有着非常严格的要求，而且没有大括号，没有分号2.一种是以scss后缀，更接近我们程序写法，比如大括号，分号SASS允许用户编写自己的函数。
Sass学习之路(5)——变量
YuuyaRin的博客
12-12 2003
1.定义变量: Sass中定义变量的关键字是'$'(毕竟程序员缺钱)，并使用冒号(:)进行赋值，例如： $width:200px;//定义了一个名为width的变量，值为200px 2.普通变量和默认变量: 普通变量便是我们在大括号外用上面的方式声明的变量，可全局使用。 默认变量需要在声明的变量后加上  !default ，如下： $lineHeight:1.
sas学习笔记01-赋值语句，累加语句，keep,drop,rename,（retain/sum statement）
goopancake的博客
11-03 9150
学习笔记01-赋值语句，累加语句，keep,drop,rename,（retain/sum statement）赋值语句几种赋值的实例rename语句累加语句与retain语句的区别《是可执行语句》Keep,drop语句《不可执行的语句》retain语句《不可执行的语句》retains values from the previous iteration of the DATA stepretain的基本语法sum语句也能达到retain的效果 赋值语句 variable=expression 几种赋值的实
sass中的变量
听海边涛声
08-21 616
sass中的变量
通过sass设置变量，在不同情况下修改样式变量
软宝宝的博客
03-29 2501
通过sass设置变量，在不同情况下修改样式 最新开发个项目根据不同角色的整合，而这几个不同角色界面结构差不多，只是一些主题颜色不一样，我这边通过sass变量，判断登录角色修改样式。 第一步：先全局设置公共样式，通过“–”命名方式声明变量 :root{ font-family: 'Adobe Heiti Std R', sans-serif; --mainColor:#5B7CFE; --subColor:#678AFE; --thirdColor:#EBEDFF;
Sass/Less进阶-Js操作修改变量
Hwyll的博客
08-31 2703
Sass/Less进阶-Js操作修改变量
sass最简教程，从入门到上手，简单易学
CRMEB小程序商城的博客
07-23 1893
以上就是sass的logo, 开始之前你首先得具备html和css的基本知识！ 什么是sass？ Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。 Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了 CSS3，增加了.
如何在Sass中使用CSS模块？
2402_85762143的博客
06-17 534
虽然Sass没有内置的CSS模块支持，但通过命名空间、BEM方法和局部变量，你可以在Sass中实现类似CSS模块的效果。此外，集成现代构建工具可以进一步简化CSS模块的使用和管理。编写关于Sass和CSS模块的文章时，可以围绕这些概念展开，详细介绍每种方法的优缺点和使用场景，以及如何在实际项目中应用这些技术。
gulp-sass-glob：在sass中使用glob include
02-03
基本用法 main.scss @import " vars/**/*.scss " ; @import " mixins/**/*.scss " ; @import " generic/**/*.scss " ; @import " ../components/**/*.scss " ; @import " ../views/**/*.scss " ; @import " ../...
vue项目引入公用sass文件，动态设置sass中的公用变量值
weixin_42542581的博客
02-07 2606
公用sass文件引入 1.设置sass 动态修改sass文件中变量
Sass - 变量($)
🏆 前端领域优质创作者
09-21 4454
基本语法 定义一个 Sass 变量非常简单，变量以美元符号($)开始，赋值像设置 CSS 属性一样： $new-color: rgb(255,0,0); 然后，便可以使用该变量： div{ background: $new-color; } 编译为CSS： div{ background: rgb(255,0,0) } 局部变量 几乎所有语言均存在局部变量与全局变量，当然 Sass ...
在Sass中，如何修改变量的作用域？
alankuo的专栏
09-09 262
在这个例子中，变量`$primary-color`被传递给混合`set-color`，在混合内部，`$color`参数接收到这个变量的值。- 在上面的例子中，在`.nested`选择器中，通过`$global-color!global`声明将局部作用域中的变量临时提升为全局作用域，从而使用全局变量`$global-color`的值。- 在上面的例子中，使用`@at-root`指令将`.nested`选择器提升到根层级，这样在`.nested`选择器中可以直接访问全局变量`$global-color`。
js设置/修改scss中的变量值
熊小露的博客
10-13 5502
js动态修改scss变量值 1.scss文件定义变量 //--test ：为js操作此变量需要用到的KEY //red: 默认的css属性值 $textColor: var(--test, red); 2.js中更改$textColor 变量的值 //--test ：为js操作此变量需要用到的KEY //blue: 修改后的css属性值 document.getElementsByTagName('body')[0].style.setProperty('--test', 'blue');
SASS第三篇 变量
qq_37805832的博客
08-03 556
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.SASS中的变量 SASS中的变量和LESS中一样, 只是定义格式不同 LESS中定义变量 @变量名称: 值; SASS中定义办理 $变量名称: 值; */
scss变量动态修改
yjl23332的博客
06-28 3755
动态修改css的变量设置的属性值
js修改scss变量,动态修改scss变量
热门推荐
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-27 3万+
js修改scss变量,动态修改scss变量 需求，一个页面白天打开是一个风格，晚上打开切换为另一种风格。 之前用的都是写一个list数组，然后数组里面放一些颜色，然后再定义一个下标，通过nth(数组,下标)去拿，例如 $index:1 !default;//默认变量为1 $backColorList: #409EFF,red,black; $headBackColor: nth($b...
Sass变量的使用
风轻云淡
02-07 398
https://www.jianshu.com/p/23d66d2ddde1
sass中的变量$
liuxing393724034的博客
11-01 3599
1、定义变量 SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样： $title-color:red; //定义变量 //使用 .title{ font-size:14px; color: $title-color; } 2、sass变量的作用域 sass变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），...
uniapp使用sass怎么使用
最新发布
11-26
在uni-app中使用Sass主要是为了样式预处理器，它可以让你编写更易维护、更具组织性的CSS代码。以下是使用Sass的基本步骤： 1. **安装依赖**: 首先需要在项目中安装Node.js，然后通过npm或yarn来安装`node-sass`库。在项目根目录运行命令： - `npm install node-sass` 或者 - `yarn add node-sass` 2. **配置构建工具**: Uni-app默认使用的是Webpack作为构建工具，你需要在`.wxmlcs`配置文件中添加对Sass的支持。如果你使用的是Vue CLI，可以添加`vue-cli-plugin-unipack`插件并设置支持Sass。 ```json // vue.config.js 或 .wxmlcs module.exports = { css: { loaderOptions: { sass: { data: '@import "@/styles/main.scss";', // 引入你的Sass入口文件 sourceMap: true, includePaths: ['src/assets/sass'] // 自定义路径，包含Sass文件 } } } } ``` 3. **创建Sass文件**: 在`src/assets/sass`或其他自定义路径下创建`.scss`文件，例如`main.scss`，开始编写Sass代码。 4. **引入和使用**: 在`.vue`组件或全局样式文件中引用已经编译后的CSS，通常是将Sass编译后的结果引入到`<style>`标签内。 ```html <!-- App.vue --> <style scoped> @import "./styles/main.css"; // 将编译后的CSS导入 </style> ``` 5. **编译Sass**: 保存Sass文件后，每次修改都会触发Webpack的自动编译。如果使用Vue CLI，可以直接刷新浏览器查看效果，如果没有集成，可以手动运行`npm run build`或者`yarn build`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值