sass-------sass的基本介绍、node.js的sass工具

一.sass的基本介绍

sass的基本介绍是一种 css 的预编译语言 --- 就是另外一种css的语法形式可以编译执行 css 语言内容与 普通css 的区别:可以定义变量,定义if判断,for循环,定义类似函数的语法...感觉上就好像是js一样,可以做很多的逻辑编程效果sass曾经想统一世界,除了标签用html写,其他的都要用sass来定义曾经有一段时间,你不用sass写页面,都不好意跟别人打招呼之后,因为有了 框架 ,框架中有专用的 UI 架构语法,编辑css样式更方便快捷现在 sass less 等等 css的预编译语言,已经凉透了,没人用了我们学习,只要能基本看懂,遇到老项目,知道怎么修改样式就可以了是在不行你还可以用框架 重写sass的基本特点sass有两种语法规范sass  就是没有 { } 的css语法但是没有 { } 不好区分,属性属性值,两个属性之间的区分sass这种格式,当前sass最火的时候,也不怎么用scss  与 普通 css语法形式基本一致,只是多了变量,判断,循环等语法形式常见的 sass 语法格式sass的基本语法演示普通css***************div{width:100px;height:100px;}div > p{width:200px;height:200px;}sass   没有 { } 的css , 靠缩进来进行属性,属性值的区分*****************divwidth:100px;height:100px;div > pwidth:200px;height:200px;scss  带有 { } 的css , 只是多了变量等*********************div{width:100px;height:100px;}div > p{width:200px;height:200px;}sass的说明:浏览器是不能直接执行 scss 文件,必须要通过编译,转化为正常的css语法,浏览器才能执行编辑方式有3种1,最简单的方式 : 使用VsCode编辑器,下载 easy sass 的插件,就可以完成编译工作但是编译插件,很多功能不能实现2,使用 node.js 来进行编译node.js 中提供了 sass编辑依赖包 可以通过 npm 来下载执行必须要定义为全局作用域的依赖包npm i -g sass  /  npm install --global sass3,常用的方式,使用 gulp 来 压缩打包 sass文件,在打包的同时,将 sass文件转化为 css文件主要显示 gulp 方式来编译 sass 文件

二.node.js的sass工具

编译 sass 文件 有多种编译方式不用切换到node编辑中只要在 cmd 中,切换到正确的路径,执行输入名称执行即可通过 node 直接运行 sass依赖包1,单一文件的编译sass 你要编译的文件 编译之后的文件名称可以定义编译生成的文件的名称但是,源scss文件,每次修改之后,都要再次执行编译才会生成新的内容的css文件2,单一文件的时时编译sass --watch 你要编译的sass文件:生成的文件监听形式,如果源scss文件发生改变,自动生成新的编译的css文件但是,这种语法,只能监听一个scss文件3,时时监听一个文件夹,多文件的时时编译sass --watch 你要编译的sass文件夹:生成的文件夹不能定义文件名称的 生成与源文件文件名相同文件类型不同的css文件说明:map文件的作用  map 称为映射 map 文件是映射生成的代码的位置,表示原文件中代码的所在的行数实际项目中,后代代码调试,有可能造成sass文件代码与对应的css代码的行数不同map映射文件,是为了在控制台中,显示css样式是在 sass 文件中的源码位置所谓的映射:映射概念是 计算机编程中,常见的一个名词我们之前也接触过,类似映射的概念数组a 是 [1,2,3,4,5]  将数组a中所有的数据,数值乘以2,形成一个新的数组b数值b 是 [2,4,6,8,10] 数组b,就是数组a的映射通俗得讲,所谓的映射,就是将 A 通过 一定的规范 转化生成 B那么 B 就是 A 的映射

三.过程

2,单一文件的时时编译

sass-------sass的基本介绍、node.js的sass工具相关推荐

Node.js：NVM工具的使用 nvm常用命令
NVM: Node Version Manager Node.js的版本管理工具,可以实现多个node版本共存,并随意切换,就相当于python里面的pyenv 项目地址:https://github ...
下载Node.js和Node.js软件+Sass结合学习代码
一.Sass是什么? 产生原因:在学习Sass之前,首先了解一下原生CSS语言,CSS仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用.CSS主要有以下缺点. CSS是一门非程序式 ...
廖雪峰介绍Node.js
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434501245426a ...
详细介绍 Node.js
目录 Node.js 是什么 Node.js 能做什么 Node.js 的特点 Node.js 的组成 1) V8 引擎 2) 本地模块 3) 标准库总结 Node.js 是什么 Node.js 不 ...
带你了解Node.js包管理工具：包与NPM
摘要:包与NPM Node组织了自身的核心模块,也使得第三方文件模块可以有序的编写和使用. 本文分享自华为云社区<NodeJs深入浅出之旅:包与NPM>,作者:空城机. 包与NPM Nod ...
Node.js：常用工具、路由
一.常用工具util util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能过于精简的不足. 1.util.inherits util.inherit ...
Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块使用 cnpm 命令 cnpm i webpack- ...
node.js之打包工具webpack
什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么重复造轮子市面上已经存在的模块管理和打包工具并不 ...
如何在Windows上安装Angular：Angular CLI，Node.js和构建工具指南
In this tutorial, we'll learn how to install Angular CLI in Windows and use it to create an Angular ...
Node.js 进程管理工具
pm2 is a process manager for Node apps with a builtin load-balancer. pm2项目: https://github.com/Unite ...

sass-------sass的基本介绍、node.js的sass工具

一.sass的基本介绍

二.node.js的sass工具

三.过程

sass-------sass的基本介绍、node.js的sass工具相关推荐

最新文章

热门文章