Sass简介

简介Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如Compass)有助于更好......

YANGWW1111Web前端 · 文档2022-06-26阅读 · 25


属性嵌套

属性嵌套 (Nested Properties)有些 CSS 属性遵循相同的命名空间,比如font-family, font-size, font-weight都以font作为属性的命名空间。为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:.funky { font: { family: fantasy; size: 30em; ......

YANGWW1111Web前端 · 文档2022-06-24阅读 · 23


运算

运算 (Number Operations)SassScript 支持 +, -, *, /, %,<, >, <=, >=,==, !=等运算,如果有必要会在不同单位间转换值。p { width: 1in + 8pt; ## in为英寸单位}编译为p { width: 1.111in; }除法运算/(Division and/)/在 CSS 中通常起到分隔数字的用......

YANGWW1111Web前端 · 文档2022-06-24阅读 · 23


函数

圆括号 (Parentheses)圆括号可以用来影响运算的顺序:p { width: 1em + (2em * 3);}编译为p { width: 7em;}函数 (Functions)SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用:p { color: hsl(0, 100%, 50%);}编译为p { color: #ff0000;}关键词......

YANGWW1111Web前端 · 文档2022-06-24阅读 · 24


webpack、loader

webpack webpack是一个静态模块打包工具;webpack 处理应用程序时,会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将项目中所需的每一个模块组合成一个或多个bundles 导出。webpack的核心概念有如下:入口(entry):指......

YANGWW1111Web前端 · 文档2022-06-23阅读 · 32


Vue支持sass

1. CSS预处理器CSS预处理器定义了一种新的编程语言,为CSS增加了一些编程特性,让CSS更加简洁、强大、易维护,常见的CSS 预处理器语言有 scss(sass)、less 等。2.SASS和SCSS的区别除了文件后缀不同(分别是“.sass” 和 “.scss”)......

YANGWW1111Web前端 · 文档2022-06-23阅读 · 32


层级嵌套和父选择器

层级嵌套#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }}父选择器&a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } // 此处的 & 等价于父元素 a body.firefox & { font-weight:......

YANGWW1111Web前端 · 文档2022-06-23阅读 · 25


Vue脚手架

CLI(@vue/cli) CLI(@vue/cli) 是一个全局安装的 npm 包,提供了终端里的vue命令,如:vue create、vue ui等;CLI 服务 (@vue/cli-service)CLI 服务 (@vue/cli-service) 是一个开发环境依赖,是一个局部安装在每个项目中npm包;CLI 服务构建于webpack和webpack......

YANGWW1111Web前端 · 文档2022-06-22阅读 · 33


Windows使用Docker安装GitLab

1. 拉取gitlab docker镜像docker pull gitlab/gitlab-ce2. 创建数据卷docker volume create gitlab-data-vol;docker volume create gitlab-log-vol;docker volume create gitlab-config-vol;3.启动gitlab注:自行根据宿主机情况设定映射端口docker run --detach--publish 10443:443 --publish ......

YANGWW11112022-06-21阅读 · 162


css备忘

1.0 禁止换行white-space:nowrap;overflow:hidden;text-overflow:ellipsis;/*使用省略号来代表被修剪的文本*/2.0 CSS通过索引的方式选择元素div:nth-child(1){}// 或div:nth-of-type(1){}两者区别详见 : https://sidoc.cn/doc/1227.html3.0 CSS阴影box-shadow: 3px 1px 12px 1px#c......

YANGWW1111Web前端 · 文档2022-06-20阅读 · 567