特别说明:scss函数名中的中划线和下划线是等同的,font-size和font_size指向同一个函数. 1.变量 2.选择器嵌套 3.属性嵌套 规则如下: (1).把属性名从中划线-的地方断开. (2).在根属性后边添加一个冒号:紧跟一个块,把子属性部分写在这个{ }块中. 4.&父选择器标识符,它的作用就相当于一个父选择器的占位符. 5.引入 6.操作符 +.-.*./.% 7.函数 8.混合 @mixin 9.继承@extend…

在入口main.js里构建scss是通过引入模块的方式 import './assets/_reset.scss'; import './assets/_flex.scss'; import './assets/_functions.scss'; 在.vue组件里是单独构建的 <style lang="scss" scoped> img { width: rem(300px); } #product, .gallery, .detail { width: rem(750px…

引用scss文件--看上一篇的less使用,里面的Koala,一样的原理!!! 方法一: scss: /**定义变量 */$width:404px;$color:green;$font-size:20px;.scss1{ width: $width; height: $width/2; background-color: $color; font-size: $font-size;}css: .scss1{width:404px;height:202px;background-color:gre…

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法.(本篇中的参数配置及使用方式均基于webpack4.0版本) 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写,那么在打包中需要处理的基本问题包括: 预编译语言转换 样式文件挂载方式选择 代码优化(合并及压缩) 去除或保留指定格式的注释 资源定…

在scss中除了可以定义变量,具有@extend和@mixins等特性之外,还自备了一系列的函数功能. scss本身带有大量的内置函数,具体可以参阅官网函数模块. 一.字符串函数 unquote($string):只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号.如果字符没有带引号,返回的将是字符串本身. quote($string):只能给字符串增加双引号,而且字符串中间有单引号或者空格时,需要用单引号或双引号括起,否则编译的时候将会报错. 二.数字函数 perce…

(Sass::Script::Value::Bool) unitless($number) Returns whether a number has units. Examples: unitless(100) => true unitless(100px) => false Parameters: $number (Sass::Script::Value::Number) Returns: (Sass::Script::Value::Bool) Raises: (ArgumentError)…

项目初始化 注意:安装前请确保有安装node.js,并且node>=8.9 全局安装vue npm install -g @vue/cli 如果之前安装了vue旧版本,查看vue --version 创建项目 vue create vue-cli3-init(项目名) 注:名称不能采用驼峰 vue-cli3也可以采用UI面板进行配置,相对比较方便,目前先写命令行创建,后续再加上面板创建. 选择配置,默认配置还是手动,这里我选择手动Manually,继续回车会让你选择你想要功能. (不用用git窗…

Vue-cli 多页相关配置记录 搭建一个顺手的MPA项目脚手架,其实根据项目的不同目录结构和打包配置都可以进行灵活的调整.这次的项目可能是包含各种客户端和管理后台在一起的综合项目所以需要将样式和脚本做比较好的隔离.权限验证可以使用统一的模块,然后每个单独SPA中根据需求再单独实现数据或者功能权限的控制. 目录结构 因为项目间的差异可能会比较大,所以除了基础的依赖以及一些通用的Service.其他模块之间需要做好隔离.每个Module 就是单独的一个SPA,可以拥有自己的一套 Styles,Ro…

一.rem布局 rem是相对于根元素的字体大小单位. 假设html的字体大小为16px,那么1rem = 16px; 一旦根元素html定义的font-size变化,整个页面中运用到的rem都会随之变化. #1. 100等分法 1. html的font-size设置为100px -- 便于换算 2. body的font-size设置为0.16rem -- 使用rem重置字体大小 3. 通过媒体查询在不同设备下修改html的font-size -- 整个页面中的rem会随之改变   #2. cal…

最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3); background-color: $linkColor; } 生成的 CSS 代码 .box{ box-shadow:0 2px 6px 0 rgba(32,160,255,.3)…