首页 > TAG信息列表 > sass

非常有用的算法 SASS

如何使用要正确使用它,您只需有一个文件夹,其中字体由其名称分隔,每种字体都有自己的文件夹,如下所示: 然后,您可以将此代码粘贴到 SASS 文件中:$path-to-fonts: '../fonts';$font-families: ( 'Font1': ((100, 'Thin'), (200, 'ExtraLight'),

sass讲解

sass概述 sass是一个预编译的css语言,它是使用ruby语言写的,和它一样的预编译语言还有less,它是使用js写的。sass的环境之前是ruby环境,但是由ruby并了python,所以它可以运行在python环境上,这个些内容并不能直接使用,因为它属于预编译css,没有进行编译是不能被使用的。编译完还是css,那么

关于vue.js:vue使用sass中deep报错

转自: https://lequ7.com/guan-yu-vuejsvue-shi-yong-sass-zhong-deep-bao-cuo.html 之前装了一个vue3.0的环境, 结果搬砖的时候发现vue2.0的项目跑不了了 然后照着网上说的卸载node-sass, 根据node的版本装node-sass 结果弄好之后发现vue里面的穿透样式/deep/报错了( 项目启动的

node-sass 安装出错常见解决方法

使用与 node-sass 版本兼容的 node 到 package.json 中找到 node-sass 的版本号。使用 nvm 将 node 切换到与 node-sass 版本兼容的版本(sass/node-sass 有版本对照表)。 安装指定版本的 python 并将其设置为环境变量 node-sass 依赖的可能是 python2,如果本机只安装了 python3,则

sass---安装sass失败解决方法

今天在做vue项目,项目是老项目新开,使用的webpack比较老旧,通过正常的安装sass的方法,报错,无法安装。 常规的安装方法: 1、安装sass-loader npm install sass-loader --save-dev 2、安装dart-sass npm install sass --save-dev 或者合并: npm i sass sass-loader -D 结果今天,在第

记录vue

#查看版本 node -v #安装 Node.js 淘宝镜像加速器(cnpm)注意源地址已经改变 npm install -g cnpm --registry=https://registry.npmmirror.com cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名

vue记录

#查看版本 node -v #安装 Node.js 淘宝镜像加速器(cnpm) cnpm install cnpm -g #全局安装 vue-cli cnpm install vue-cli -g #查看是否安装成功 webpack -v 或 vue list # 这里的 myvue 是项目名称,可以根据自己的需求起名 vue init webpack myvue #初始化运行 cd myvue cnpm instal

Sass 混合指令——提高你的 CSS 重复使用率

前言 Sass(Scss)支持混合指令,姑且看作是函数一样的东西,可以传递参数、传递参数变量、参数默认值等。它也支持自定义函数,可以说是真正意义上的函数,可以返回值,也有混合指令的特性。 要高效地管理和使用 CSS 样式,除了要掌握嵌套使用以外还要掌握混合指令、函数、变量。 混合指令 如何定

Vue配置scss匹配node-scss与sass-loader

1、node 版本、node-sass 版本及 sass-loader 版本查看: 其一、我的 node 版本查看:在命令行输入查询命令:node -v我的 node 版本为:v14.19.0其二、我的 node-sass 版本查看:"node-sass": "^4.14.1" 其三、我的 sass-loader 版本查看:"sass-loader": "^7.3.1" 2、node 版本

CSS预处理器的对比 — sass、less和stylus

本文根据Johnathan Croom的《sass vs. less vs. stylus: Preprocessor Shootout》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-

Vue和ElementUI

1、创建工程    这个时候就安装路由 比idea运行后安装好,编码会出现代码提示 前端东西不能用纯CSS来写,安装SASS加载器,通过SASS编译 3、npm命令:  

sass-loader 版本不兼容导致老项目起不来,重新构建失败的问题 Module build failed (from ./node_modules/_sass-loader@7.3.1@sass

Failed to compile. ./src/styles/index.scss (./node_modules/_css-loader@1.0.1@css-loader??ref--8-oneOf-3-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??ref--8-oneOf-3-2!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--8-oneOf-3-

SASS 插值语句 #{ }的使用

在之前我们已经使用用 / 来进行计算,但如下情况不一样 例如 p{ font: 16px/30px Arial, Helvetica, sans-serif; } 如果需要使用变量,同时又要确保 / 不做除法运算,而是完整地编译到 CSS 文件中,这种情况怎么办???可以使用 #{} 插值语句将变量包裹。 使用插值语法 p { $font-si

vue 使用sass定义全局变量

一、安装以下依赖: npm i -D sass-loader@8.x -D npm i node-sass@4.14.1 -D npm i sass-resources-loader -D 二、新建文件:variables.scss $primary-color:#547fcd; $secondary-color:#6992dd; $text-blue-color:#648eda; $highlight-color:#7cffe2; 三、配置 vue.config.js:

2022.7.27 - Sass的注意点以及几个常用语法

安装 Sass 后,您可以使用 命令将 Sass 编译为CSS 。 例如,sass input.scss output.css从您的终端运行将获取一个 Sass 文件input.scss,并将该文件编译为output.css. 您还可以使用该 --watch标志查看单个文件或目录。watch 标志告诉 Sass 监视源文件的更改,并在每次保存 Sass 时重新编

css变量中使用sass变量

1、需求:需要在css变量中使用sass变量,发现行不通,如下 $bg:red; .theme{ --bg:$bg; } 2、原因:Sass 的语法改变了,较新版本的Sass要求在插值中写入自定义属性值,比如#{} $bg:red; .theme{ --bg:#{$bg}; } 这样就可以

vue2配置sass全局共享变量

  安装依赖 yarn add sass-loader@8.x     vue.config.js module.exports={  css: {    loaderOptions: {    sass: {    prependData: `@import "@/assets/styles/variables.scss";`    }   }  }}  

nvm的安装和使用

前言:在开发项目的过程中可能需要用使用不同版本node来进行开发,如果每次都卸载安装node的话很麻烦,这时候可以使用nvm来实现node多版本管理 一、安装nvm 前往nvm项目(https://github.com/coreybutler/nvm-windows/releases)下载压缩的安装包(nvm-setup.zip),解压后直接安装;尽量不放在C盘,

Sass文件名中的_有什么用

原文:Sass知识点之 —— @import 、Partials 与 @media:https://blog.csdn.net/q213546879/article/details/98956870 文件名前面的下划线作用, 比如_grid.scss 这时候编辑器不会自动编译这个文件,而只有当我们在另一个scss文件里引入这个文件之后,才会把这个文件里的内容编译到引入的

Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0解决

原文链接:https://blog.csdn.net/weixin_44421143/article/details/122243061 今天在写Vue页面的时候,根据教程,我要安装sass-loader与node-sass,但是在安装完成后运行项目的时候,报出如下错误: Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0 解决方案如下

移动端node-sass安装不上报错

总结所有方法是从哪里安装问题, 1.查找主机对应版本: node -p "[process.platform, process.arch, process.versions.modules].join('-')" 2.设置安装路径(也就是从哪里安装) 如果是 .npmrc里设置 注意路径我之前因为这个一直安装不上最后边就是安装包的路径 同事方法

Ruby-Sass 安装

安装ruby sass是基于ruby的环境,所以安装sass之前需要安装ruby。rudy windows 的安装包官方下载地址是:https://rubyinstaller.org/downloads/ ruby -v //查看ruby是否安装成功 安装sass gem install sass //安装sass //网络慢可使用淘宝镜像安装 - $ gem sources --remove htt

day33 sass和git

sass 概述: sass属于对应的预编译css(这个东西会被编译为css)他相对是css扩展(简化css代码)(less、stylus) sass的环境支持 1.sass需要ruby语言支持(之前) 2.需要python语言支持(node其中其实有python的环境) 主要是用sass进行编译的css(而不是直接使用sass)之后当我们的项目是通

自动化构建

目录背景自动化构建体验案例缺点改进(NPM scripts) 背景 一切重复工作本应自动化,自动化构建是前端工程化非常重要的组成部分。 自动化:就是通过机器去代替手工完成一些工作。 构建:把一个东西转换成另一个东西。 自动化构建:将开发过程中的源代码自动化的转换成生产环境中可以

sass全局变量配置和使用示例

vue2.6 sass全局变量配置 安装sass-loader npm install sass-loader@8.0.2 --save-dev vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependData: `@import '@/assets/styles/variables.scss';` // 注意此处的 ; 不能少!