scss知识应用总结

已于 2024-05-09 11:24:08 修改
阅读量230 收藏 1
点赞数 4
文章标签： scss 前端 css
于 2024-05-09 11:20:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74409046/article/details/138605848
版权

详细见官方文档：scss中文网

1、&的使用

①、&代表直系父选择器

&在scss的嵌套写法中，即代表父选择器

②、在多类选择器中的写法

（如：p.className.className）中，写法为：&.className，注意&于后一个类名不能有空格，否则变成后代选择器

常用场景：

配合:class为点击的元素添加类名，进而添加样式

可实现一个点击选中的样式变化，如下图

③、&-xx的写法

同上代码中，&-item的写法，等同于.message-titleBar-item

这使得在结构中设置类名时，用xx-xx-xx-xx，即以—连接的形式命名，使得结构更清晰

dringlestry
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sass 学习笔记1
Choiceanxiety的博客
03-03 1170
sass 学习的第一篇
收藏!学习Scss/Sass,一篇文章就够了!
qq_48898298的博客
06-16 1143
Scss/Sass 的学习笔记 一、学习前言 1.为什么要学习Scss/Sass? 因为传统的css没有变量和样式复用机制,代码复用性低,不易于维护,且无法嵌套书写,导致代码繁重、冗余、逻辑混乱。 注: 现在的css是可以定义变量的了!!! 2.Scss和Sass什么关系? 简单理解就是Scss是升级的Sass,Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。现文档学习笔记就摈弃古老的Sass只记录最新的S
SCSS/SASS（上）
CaraYQ的博客
01-14 1098
目录介绍SCSS编译命令编译常见的编译错误解决方案不同样式风格的输出方法嵌套输出方式 nested展开输出方式 expanded紧凑输出方式 compact压缩输出方式 compressed 介绍 SCSS/SASS是CSS预处理器，为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。 Sass和SCSS其实是同一种东西 后者是前者的进化版 改进了语法书写方式 Sass和SCSS区别： （1）文件扩展名不同，Sass是以
SCSS动态生成类
最新发布
weixin_41308436的博客
10-23 679
:active {以上只是小部分举例应用，都大同小异，实际上还可以灵活使用生成各种各式的样式、提高我们的样式代码灵活度，最后想说：真正使用上scss还是很香的！
最详细预处理器scss具体演示，通过each循环样式添加类名，大大提高开发效率和大幅度减少css代码量
weixin_45389051的博客
03-31 998
这里具体怎么安装scss我就不说了，网上有很多，具体说一下怎么使用 首先我们想定义几种颜色的 自我感觉这相当于一个键值对 $colors:( "primary":#db9e3f, "white":#fff, "light":#f9f9f9, "grey":#999, "grey-1":#666, "dark-1":#343440, "dark":#222, "bla...
vue2.0开发实践总结之入门篇
11-27
Vue 2.0 开发实践总结之入门篇 Vue.js 是一款轻量级的前端框架，因其简单易学、灵活性高而备受开发者喜爱。本文主要介绍基于 Vue 2.0 的开发实践，包括使用 Vue CLI 构建工具、Webpack 基础知识以及 Vue 项目的基本...
TimeTo:小应用程序来检查剩余时间的东西
03-07
总结来说，TimeTo是一个基于SCSS构建的小型时间管理应用，具备倒计时、提醒和个性化设置等功能，旨在帮助用户更好地管理他们的日常任务和时间。其背后的技术栈包括前端开发、时间管理算法、用户界面设计以及可能的云...
input-range-scss：使用Sass设置跨浏览器兼容范围输入的样式
02-02
**标题与描述解析** ...通过学习和应用这些知识点，前端开发者可以提高工作效率，创建出既美观又具有广泛兼容性的界面元素。同时，这也是提升跨浏览器样式一致性、优化用户体验和提升代码可维护性的良好实践。
应用程式
02-15
总结起来，"应用程式" 和 "TypeScript" 结合暗示了使用 TypeScript 和 Ionic 框架构建移动应用的过程，涉及到了项目结构、组件开发、服务封装、第三方库集成、测试和部署等多个方面。通过熟练掌握这些知识，开发者...
sass 的具体用法总结
mao2411的博客
07-02 774
scss编译后的css 文件中忽略识别单行注释，显示多行注释 1.单值变量 在scss文件中编写： $a : red; //单值变量使用$符号声明 html { color: $a; //写单值变量$a } 编译结果: html { color: red; } 2.多值变量 在scss文件中编写： $b : red green blue; //多值变量空格隔开 .box1 { color: nth($b,1);//调用时使用nth(变量名，需要的值的位置) } .bo
有条件地将CSS类名连接在一起-在React中特别有用-JavaScript开发
05-26
class-names有条件地将CSS类名结合在一起-在React Install中特别有用$ npm install @ sindresorhus / class-names用法classNames（'unicorn'，'rainbow'）; // =>'unicorn rai类名有条件地将CSS类名连接在一起-在React Install中特别有用$ npm install @ sindresorhus / class-names用法const classNames = require（'@ sindresorhus / class-names'）; classNames（'unicorn'，'rainbow'）; // =>'unicorn rainbow'classNames（{awesome：true，foo：false}，'unicorn'，{rainbow：false}）; // =>'awesome unicorn'classNames（'unicorn'，null，undefined，0，1，{foo：null}）; // =>'unicorn'const butto
SCSS中文教程
08-05
难得的好教程，分享给大家，希望大家喜欢。
classnames css样式类合并
weixin_44099195的博客
05-06 365
classnames 可以解决按需使用不同样式类的问题。 yarn add classnames --save 1、使用 var newClassName = classnames(‘a’,(b&&true),{c:true}) newClassName // ‘a b c’ // classname 内 逗号相隔 可以是 字符串 对象等变量 ...
vue3中应用BEM规范，使用sass函数拼接BEM类名，同时导出sass变量在js中访问
小硅壳的博客
06-29 727
在vue3中使用bem规范书写sass。定义sass函数拼接符合bem规范的类名、如何在在js中使用sass暴露的变量、将公共函数挂到vue3实例上，并在template标签内部访问、
CSS预处理工具（sass，scss）
weixin_43989621的博客
09-03 790
CSS预处理工具 一、什么是CSS预处理工具 CSS预处理工具是一种语言，用来为CSS增加一些编程的特性，无需考虑到浏览器的兼容性问题 例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言的一些基本技巧，可以让你的CSS更加简洁，适应性更强，代码更直观等诸多好处 二、三款CSS预处理工具 less 官网： http://lesscss.cn/ stylus 官网： https://stylus.bootcss.com sass(有两个版本sass和scss，scss是sa
web前端培训 SCSS 使用技巧总结分享
weixin_45695430的博客
06-07 368
scss提供了四种输出格式，在命令行中使用 --style 选项进行设置，在Live Sass Compiler中配置format参数_前端培训。
lang=“scss“动态拼接变量 设置背景图
yangwq的博客
03-03 5573
HTML <div :class="['header', `header${num}`]"></div> data() { return { num: this.$route.query.num % 3 || 1, } }, CSS <style lang="scss" scoped> $imgName: 1, 2, 3; %bgr { background-repeat: no-repeat; background-size: 10..
scss-字符串连接符
banchousuo6747的博客
10-29 1922
　　+ 运算可用于连接字符串: // SCSS p { cursor: e + -resize; } // 编译后的 CSS 样式 p { cursor: e-resize; } 　　请注意，如果带引号的字符串被添加到不带引号的字符串中（也就是说，带引号的字符串在 + 的左侧）， 　　那么返回的结果是带引号的字符串。同样，如果一个不带引号的字符串添...
scss引用其他scss
08-05
在Vue文件中，可以使用@import指令来引用其他的scss文件。例如，通过在Vue文件的样式部分中使用@import '../style/test.scss'，可以将test.scss文件引入到当前的scss文件中。接下来，你可以在该文件中使用test.scss中定义的变量和样式规则。这样做可以方便地组织和管理不同的scss代码，并且可以在不同的文件中共享变量和样式规则。 举个例子，假设有两个.scss文件，分别是a.scss和b.scss。在a.scss中，你可以使用@import 'b.scss'来引入b.scss文件，然后在a.scss中可以使用b.scss中定义的变量。这样，在修改b.scss中的变量值后，a.scss中引用该变量的样式也会相应地改变。 总结来说，通过在scss文件中使用@import指令，可以方便地引用其他的scss文件，并共享其中的变量和样式规则。这样做有助于组织和管理scss代码，同时也方便了样式的复用和维护。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值