如何使用sass

最新推荐文章于 2024-09-06 17:00:18 发布
最新推荐文章于 2024-09-06 17:00:18 发布
阅读量532 收藏
点赞数
文章标签： sass vscode vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45670042/article/details/119515820
版权

文章目录

前言

最近在学习sass的使用，然后就跟着官网一步一步去下载安装去了，后来想了想不对劲啊，之前用vscode也没有安装过sass也能使用啊？去网上搜了一下，这才发现，官网上说的使用和我想用的方法根本不是一个东西…在此记录一下各种坑吧。

使用

结合官网教程和个人学习来说，我觉得使用sass大体分以下几种使用途径：

  • 本地下载对比编译后文件进行学习
  • 通过编译器的一些插件直接在项目中使用，通过打包工具最后编译

在项目中，我们通常是结合sass-loader和node-sass来使用的。使用时需要将设置<style lang='scss'></style>然后我们就可以直接在style内部使用sass的语法进行编译了。但是此处有个大坑！！

编译器中sass插件的版本问题

sass-loader
node-sass
node.js（我的是14）
至少在本次下载配置的过程中，尝试了很多个版本，多次删了重新下，结果都不能运行，涉及到两个插件互相兼容以及node.js版本的兼容问题。真的整吐了。在此放一个能用的版本组合：(放在package.json中的devDependencies 后 npm install就行。)

 "node-sass": "^4.14.1",
 "sass-loader": "^10.1.0"

以上是在编译器中直接使用，无需本地下载的方法。
存在一个隐患
不确定版本的问题和官网最新的文档说明有无影响，导致官网教程已经更新但是当前插件版本不支持的情况。

本地下载编译使用

需要下载Ruby的运行环境

将sass下载到本地后，我们可以直接新建一个.sass文件，通过输入命令来将.sass文件编译为css文件。也可以通过命令实现类似热部署的编译效果，但本次主要使用于vue2，所以没有深究这种方法。

白纸一样
关注
SASS简单使用
LiHang1234567777的博客
07-23 1749
Sass 是一个 CSS 预处理器。 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 SASS中定义变量的格式 $变量值=值 SASS中导入另外一个SASS文件@import “”, “”, “” SASS嵌套规则：把属性名从中划线的地方断开，在根据属性后面添加yg 冒号，如何紧跟一个{ }块把子属性部分写在这个{ }块中，就像CSS选择器嵌套一样，SASS会把你的子属下解开把根属性和子属性部分通过中划线连接起来以上就是今天要讲的内容，本文仅仅简单介绍了SASS的使用。...
Sass - Css 框架小探索
Web insect
12-14 1094
最近在网上发现一个吵得很热的 Css 框架 -- Sass，也叫 Css 预处理器，感觉很有 C 的风格，借来玩玩，下面是一些 Sass 的介绍资料。  一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了
【解决bug之路】npm install node-sass（^4.14.1）连环报错解决！！！（Windows）
最新发布
m0_58355897的博客
09-06 1508
1.node，npm版本需与node-sass版本匹配，像node-sass（^4.14.1）就得node 14.x版本才可以，node 16不行 2.node-sass（^4.14.1）所需python版本对应为2，不是3 3.系统缺少Visual C++组件工具“VCBuild.exe”
如何使用SASS
一条宝鱼的专栏
07-08 405
前言 这几天一直都在研究 Sass/Scss，这次就把 Sass 基础使用方法整理发表出来。让想学习这方面知识的朋友可以多一份参考资料。毕竟现在这方面的资料特别的稀缺。 在这里贴出这两天研究 Sass 的小小成果： 《Sass开发 – Ruby安装出错解决办法：淘宝网镜像 RubyGems》 《Sublime Sass插件编译出错Decode error及‘sass’不是内部或外部命令的...
sass的基本使用
weixin_46106512的博客
04-21 2745
文章目录sass预编译css1.sass （源码使用ruby写的 基于python环境运行）2.less （诞生比sass要晚 整体语法跟sass差不多）3.styus概述特性1.兼容CSS （在sass文件里面可以直接书写css）2.支持后缀名为sass（他没有{}以及;） 以及 scss（scss常用 这个跟css书写差不多）3.社区成熟 （api众多）sass入门入门环境1.安装node （基于node环境运行）2.使用专门的编译工具 进行在线编译运行3.使用插件编译运行1.使用vscode下载插件2
一文讲述SASS简介和使用方法
weixin_46272787的博客
01-24 1817
var 表示变量，start表示开始值，end表示结束值，两种形式的区别在于 through 包括 end 的值，to 不包括 end 值。sass中使用@mixin声明混合，可以传递参数，参数名义$符号开始，多个参数以逗号分开，如果参数有多组值，那么在变量后面加三个点表示，如： $var...default即可， 默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值。在标准注释 /*后面加入一个感叹号，表示重要注释，压缩模式也会保留注释，用于版权声明等。
vue cli webpack中使用sass的方法
08-27
Vue CLI Webpack 中使用 SASS 的方法 在 Vue CLI 项目中使用 SASS 需要安装相应的依赖项和配置loader，下面将详细介绍 Vue CLI Webpack 中使用 SASS 的方法。 安装依赖 首先，需要安装 SASS 相关的依赖项，使用 ...
详解如何在微信小程序中愉快地使用sass
10-18
在微信小程序中使用Sass是一种提升CSS编写效率和可维护性的有效方法。Sass是一种预处理器语言，它扩展了CSS，增加了变量、嵌套规则、混合、函数等特性，使得CSS的编写更加简洁和模块化。本文将详细介绍如何在微信小...
react-native-sass-transformer：使用Sass为您的React Native应用设置样式
02-05
React-Nass-Sass-Transformer 使用设置您的React Native应用程序的样式。 在后台将Sass文件转换为（请参见示例）。 该转换器可以与一起使用。 它是如何工作的？ 您的App.scss文件可能如下所示： %blue { color...
详解如何在vue中使用sass
08-30
vue中使用sass详解 在本篇文章中，我们将详细介绍如何在Vue项目中使用sass，从安装sass依赖包到配置sass语法，最后实现使用sass编写样式文件。以下是我们将要涵盖的知识点： 1. 安装sass依赖包 在使用sass之前，...
vue2中使用sass并配置全局的sass样式变量的方法
12-01
 Sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言（如Java、C#、Ruby等）有的一些特性，并且完全兼容CSS语法。Sass有助于保持大型样式表结构...
Sass-Demo:这是一个Sass小教程，教初学者如何使用Sass
07-08
#Sass 和 SCSS 到底是怎么用的 所以这是一个小仓库，它将总结我使用 Sass 的经验，并希望为你，一个新手开发者简化这个过程，让你比我受的苦少。 耶。 ##Install Ruby 如果您已经安装了 ruby​​，请直接跳到下一步。 是一种建立在 C 之上的超酷高级语言。 Ubuntu 用户的方便指南，但无论哪种方式都不难。 一旦你有了Ruby，你就可以开始处理你需要的宝石了。 “宝石”是 ruby​​ 所谓的依赖项。 ##Installing 首先，您需要安装 Sass 本身。 我实际上向 Sass 文档提出了拉取请求，因为他们不知何故没有这个。 要使用的命令是： sudo su -c " gem install sass " 您可能不需要使用 sudo，因此可以随意使用。 现在所有的配置都完成了，我们可以进行一些简单的 SASS 预处理 ##Get 破解 所
Sass 使用指南：让 CSS 编程更高效、更强大
读心悦
06-08 519
Sass 是一种强大的 CSS 预处理器，通过它，你可以编写更简洁、更易于维护的样式代码。在本文中，我们介绍了 Sass 的基本语法和最佳实践，帮助你快速上手 Sass 并提高你的 CSS 编程效率。通过不断学习和实践，你将能够充分利用 Sass 的功能，为你的项目创建出优雅、高效的样式。
sass的使用
兢兢业业的码农的博客
11-22 1216
为什么使用sass CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。(当老板叫你改一个全局样式的话是特别麻烦的，使用sass后，修改全局样式就特别简单了) Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。 在项目中如何全局引入sass 在main.js文件中引入sass文件 第一步：新建一个ceshi.scss文件，并定义下面样式 $color:red; .color { background-color: $color;
Sass实战运用，如何利用好Sass
ufrontend的博客
06-13 1075
Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它提供了许多强大的功能，如变量、嵌套规则、混合（Mixins）、函数等，使得CSS的编写更加高效、灵活和易于维护。武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。，这是Sass的一种约定，表示该文件是一个部分文件，不应直接编译为CSS文件。
Sass使用
比鲁斯大人的博客
05-19 795
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。// .scss文件 $index : 6;} @ else {} } body {} -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- // 生成的css代码 body {
Sass 使用流程
ZhaoYLi 的编程学习笔记
05-03 490
Sass (Syntactically Awesome StyleSheets) Sass是对css的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时。 特色 完全兼容 CSS3 ...
SASS教程
fvllen的博客
11-13 562
SASS教程
vue3使用sass
08-30
在Vue 3中使用Sass（Syntactically Awesome Style Sheets）可以通过以下步骤来完成： 1. 首先，确保您的项目已经安装了Sass依赖。您可以使用npm或yarn来安装它们。 ```bash npm install sass --save-dev ``` 或者 ```bash yarn add sass --dev ``` 2. 在您的Vue项目中创建一个样式文件，例如`styles.scss`。您可以将此文件放置在任何您喜欢的位置。 3. 在`styles.scss`中，您可以编写Sass代码，例如： ```scss $primary-color: #ff0000; .button { background-color: $primary-color; color: white; } ``` 4. 在您的Vue组件中引入样式文件。您可以在组件的`<style>`标签中使用`@import`指令来引入Sass文件，如下所示： ```vue <style lang="scss"> @import "@/path/to/styles.scss"; /* 其他样式代码 */ </style> ``` 确保将`@/path/to/styles.scss`替换为您的实际文件路径。 5. 现在，您可以在Vue组件中使用Sass定义的变量和样式类。例如，您可以在模板中的元素上使用`.button`类，它将应用Sass中定义的样式。 这样，您就可以在Vue 3项目中使用Sass了。请记住，在使用Sass之前，您可能需要配置构建工具（如webpack或vite）以正确处理Sass文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值