@mixin df {display: -webkit-flex;display: -moz-flex;display: flex; }@mixin df-ai {-webkit-align-items: center;-moz-align-items: center;align-items: center; }@mixin df-ai-fs {-webkit-align-items: flex-start;-moz-align-items: flex-start;align-items: flex-start; }@mixin df-ai-fe {-webkit-align-items: flex-end;-moz-align-items: flex-end;align-items: flex-end; }@mixin df-jc {-webkit-justify-content: ce...
Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.Mixins have some nice features:- Arguments just like functions.- Arguments can have default values and optional values.- Named arguments allow us to use optional and default arguments when the m...
变量定义变量$color-white: white; 使用变量body {background-color: $color-white; } @mixin 与 @include定义mixin/*声明mixins*/ @mixins border {border: 1px solid #red; } 使用mixin/*使用mixins*/ .my-div {@include border; } 向mixin传递变量混入可以接收参数。 我们可以向混入传递变量。 定义可以接收参数的混入：/* 混入接收两个参数 */ @mixin bordered($color, $width) {border: $width solid $color; } .myArticle {@...
【转载】今天在执行compass create my-grid –using blueprint 命令时发现报错 google了一下，说是新版compass已经不包括compass-bluprint了。 所以我尝试执行命令 “gem install compass-blueprint”，自己手动安装compass-blueprint。虽然装上了，但是执行 “compass compile” 编译scss的时候还是报了个异常： “Undefined mixin ‘experimental‘” 上面是我在虚拟机系统中测试的。 我自己的机器因为是很久之前装的compass，可...
Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进它在书写规则，变量命名方面和CSS代码有着很大的区别。于是，后来官方在2010年推出了一个全新的语法，叫做SCSS, 意思是 Sassy CSS. 这个语法带来了对CSS友好的语法，试图弥合Sass和CSS之间的差别. 那么，它到底...
因为网上此类教程有很多，我就抓重点，让项目快速上手。如果是在windows系统下，就先安装ruby，官网下载地址：https://rubyinstaller.org/downloads/安装完之后，来跟着节奏燥起来。1、在命令行中：gem install sass2、这时候就可以直接进到你的项目文件中：sass --watch scss/:scss/ // 这监听scss整个文件夹，并生成新的css到scss文件夹中。（ps: 这里生成的文件夹也可以自己替换）提醒： 这里如果只想改变文件夹中某一个sc...
##居中布局： maring和padding,没有继承。 浏览器解析css是从右往左。 尽量减少复合元素。 背景自适应：背景居中：background-position: cenlter,0. cenlter是上下 ，0是左右 父元素，设line-heighe,子元素图片设置vertical-align:middle; ##字体： 字体有修饰，衬线字体不适合页面 五衬线字体：无修饰，如：font-family:Arial; ##11.6 less和scss less与scss可以实现代码精简，代码重用，加入了函...
命令行: win+r 调试出运行窗口; git & cmd & powershell基本使用方法: cd: 切换磁盘; cd ../ 切换到上一级; ls: 查看当前目录下所有的文件; cd 空格加文件名字: 切换到指定的目录; cls: 清空当前的屏幕内容;git命令使用clear;定义变量: $color:yellow;引用变量: div { color: $color };嵌套规则: content { width:100px; h4 { color: red; } p { text-indent...
在scss中除了可以定义变量，具有@extend和@mixins等特性之外，还自备了一系列的函数功能。 scss本身带有大量的内置函数，具体可以参阅官网函数模块。 一、字符串函数unquote($string)：只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。quote($string)：只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否...
看到一篇很好的文章，感觉不用我自己总结了，上个链接：https://blog.csdn.net/zhouzuoluo/article/details/81010331 原文：https://www.cnblogs.com/fqh123/p/11222060.html
install sassandcoffee in Nuget sayno when prompt to ask a question. changes the file from css to scss ?12345678910111213141516$mainColor: Black; /* Basics */html{ font-family: ‘Open Sans‘, verdana, helvetica, sans-serif; font-size: 14px + 10px;}body{ background: $mainColor;}h1{ font-size: 24px;} font-size can be have addition. color can be call 原文：http://www.cnblogs....
webpack.conf.js 中 resolve.alias 配置resolve: {extensions: [‘.js‘, ‘.vue‘],alias: {‘@‘: path.resolve(__dirname, ‘src‘),‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),} }配置了resolve.alias 后，在js中我们可以这样用// 原本这样写 import hongAlert from ‘./../src/scss/icon.scss‘// 现在可以这样写 import hongAlert from ‘@scss/icon.scss‘在scss中需要这样写，注意是~@// 原本这样写 @import ...
Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace. $color-primary: indigo; $color-secondary: blue; $color-support: deeppink;$theme-colors: (primary: $color-primary,secondary: $color-secondary,support: $col...
In SublimeText Preferences > Package Control.Select "Package Control:Install Package".Now type "SCSS" in the box. Click on first option which appears.Restart Sublime.Open the SCSS file原文：http://www.cnblogs.com/sanChen1314/p/5198839.html
导入.sass或.scss文件css有一个不太常用的特性，即@import 导入功能，它允许在一个css文件中导入其他css文件。然而，结果是只有执行到@import 规则时，浏览器才会去下载其他css文件，这会导致页面样式加载特别慢，从而容易出现页面闪的问题。 sass也有@import 导入规则，与css不同的是，sass中的@import 规则会在生成css文件时，把相关的文件导入合并成一个文件，而无需浏览器去下载其他的文件。另外在被导入文件中定义的变量等也可...