led的网站建设,地方网站模板,免费十大软件大全下载安装,设计说明怎么写范文sass中文文档#xff1a;
Sass: Sass 文档
1. sass的安装步骤 1. 卸载冲突的Node.js (1) winR输入control,找到电脑上的卸载软件#xff0c;找到Node.js#xff0c;右键”卸载” (2) winR输入cmd,输入命令:node -v查看结果。 如果提示: node 不… sass中文文档
Sass: Sass 文档
1. sass的安装步骤 1. 卸载冲突的Node.js (1) winR输入control,找到电脑上的卸载软件找到Node.js右键”卸载” (2) winR输入cmd,输入命令:node -v查看结果。 如果提示: node 不是内部或外部命令也不是可运行的程序,说明【卸载成功】 如果提示版本号说明没有卸载成功需要继续卸载 2. 安装插件 (1) 确保自己的电脑是联网状态 (2) 打开HBuilder,点击”工具”-”插件安装”-”安装新插件”-”前往插件市场安装(P)” (3) 在打开的页面中找到Sass插件点击”下载” (4) 在打开的页面中选中”使用HBuilderX导入插件” (5) 此时提示需要登录如果没有账号可以先注册一个账号再登录 (6) 登录后继续选择页面上的”使用HBuilderX导入插件” (7) 提示需要安装HBuilder新版本点击”继续” (8) 弹窗提示”是否打开HBuilder”选择”打开” (9) HBuilder提示”是否安装sass插件”点击”是”等待安装成功即可 (10) 可以在”工具”-“插件安装”-”已安装插件”中找到sass说明安装成功
2. sass的简介 平时写样式使用的是CSS,sass可以看作是CSS的“预处理器”是一种专门的CSS编程语言 增加了变量、函数、嵌套、判断、循环等等的用法让CSS编写更便捷清晰 sass的语法和版本 .sass是早期sass技术文件的后缀名3.0版本之前一直使用的是它文件编辑语法严格 3.0版本之后后缀名改成了.scss,这种后缀使用的就是CSS语法学习成本大大降低 .scss文件必须通过编译生成同名的.css文件才可以被html使用
3. 入门案例 步骤 1. 在目录下创建scss文件夹 2. 在scss文件夹下创建01.scss文件代码: body{ background-color:#f00; } 3. 选择“工具”-“外部命令”-“scss/sass编译”-“编译scss/sass” 4. 会在scss文件夹下看到生成了一个同名的01.css文件里面的内容与scss文件内容一致
4. HBuilder中配置sass插件自动编译效果 1. 选择“工具”-“外部命令”-“scss/sass编译”-“插件配置” 2. 在打开的package.json文件中修改第25行和27行的内容 key: ctrls 表示通过保存快捷键触发 onDidSaveExecution: true 表示开启自动编译 3. 保存修改后的配置文件重启HBuilder即可 4. 可能有的同学重启后自动编译未生效那么需要再自己手动编译1~2次就可以自动编译了
5. sass规则 1. 注释规则 //comment注释 sass的注释方式这种方式只能在scss文件中使用不会编译到CSS文件中 /*comment注释*/ CSS的注释方式sass中可以使用并且可以编译到CSS文件中 2. sass变量 为什么要使用变量 比如企业要设置主题色改版时需要将所有的企业色改掉如果我们使用了变量那么只需要修改变量的颜色就可以改掉出现的所有色值无需大量更改了 所以变量用于保存需要重复出现的值方便代码的后期维护 变量的加载和读取顺序 必须先创建变量再使用变量否则报错 全局变量和局部变量 全局变量是直接写在scss文件中的 局部变量是写在某个选择器的{}中的只有在作用域内才能使用出了此选择器就用不了了 3. 父选择器 使用就代表它的上一层选择器在嵌套写法中使用父选择器进行站位 搭配伪类、伪元素一起使用保证选择器的结构正确 .box { hover { } span{ } } 等价于 .box:hover{} .boxspan{} 4. 插值语句 格式: #{变量名} 上面我们学习到变量可以保存css的值但是我们不能直接在css选择器中直接使用变量 如果需要在css选择器中通过变量名插入变量的值就需要用#{ }包裹变量名才可以使用否则报错 $daohang:nav; $liebiao:list; .#{$daohang}-item { color:#f00;} .#{$liebiao}-item { color: #f00;} 5. 混合指令 混合指令的语法 mixin 创建混合指令的语法指令的名称自定义但注意不能用数字开头 include 使用混合指令的语法 注意混合指令可以定义参数使用时要按照定义的顺序依次传参 6. 继承 格式extend 被继承的选择器 继承一个元素想要使用另一个元素的全部样式 继承后会编译形成群组选择器更加优化 我们还可以同时继承多个选择器的样式使用逗号隔开 注意:写的是完整的选择器不是只有名字 如extend .box2,.box4; 7. 占位符选择器% 如%juxing这是一个选择器这个选择器的样式可以被继承走 但注意:使用占位符的选择器的样式不会被编译 %juxing { width: 120px; height: 40px; } 这个样式只在scss文件中有不会编译到css中 .box5 { extend %juxing; }
