-
项目文件夹分类查看全部
-
sass中的@media跟css的区别： ·sass@media可以内嵌在css规则中 ·最后编译后会被提取到样式的最高级别 好处：避免重复书写选择器和打乱样式表 @mixin col-sm($width:50%){ @if type-of($width)!=number{ @error "$width必须是一个数值类型，你输入的width是： #{($width)}"; } @if not unitless($width){//sass的内置函数，判断输入的数值是否有单位 @if unit($width) != "%"{ @error "$width必须是一个百分值，你输入的width是： #{($width)}"; } }@else{ @warn "$width应该是一个百分值，你输入的width是: #{$width}."; $width:percentage(($width)/100); @media(min-width:768px){ width:$width; float:left; } } 可以运用@at-root使样式表查看全部
-
类名一定要有语义化的意义而不光是为了视觉上的效果不全 可以利用mixin定义函数，并在调用时进行传参 @mixin col($width){ width:$width; float:left; } .webdemo-sec{ @include col(25%); &:hover{ background-color:#f5f5f5; } } ================编译结果 .webdemo sec{ width:50%; float:left; } .webdemo-sec:hover{ background-color:#f5f5f5; } 1、extend继承多个选择器，但不可以继承选择器系列。.A .B{} 2、连续继承,使用%，构成仅用来继承的选择器查看全部
-
变量操作： 1、直接操作变量，即变量表达式 2、通过函数 { ·跟代码块无关的函数，多为内置函数functions ·可重用的代码块，成为mixin{ @include方式调用（以复制拷贝方式存在的） @extend方式调用，（以组合声明存在的） } }查看全部
-
将.scss文件转换成.sass文件：sass-convert main.scss main.sass 1、局部变量抽离到外部的局部文件内（'_'开头文件可以避免被编译），使用import语句导入 //声明变量使用$ $headline-ff:[font-family]; //引用变量: .selector{ font-family:$headline-ff; } 2、sass的嵌套语法 parent_class { child_class{ ... } } a { &:hover{ color:blur; } }//使用&父类选择器将父类引入，并样式输出到父类上。否则这个：hover样式将应用到a标签的所有内容上 3、sass提供了属性的嵌套 .headline{ font:{ //注意!这里font(属性)后的冒号不可去掉 family: sans-serif, size: 16px; } }查看全部
-
css中原生的@import指令的两大弊端： 1、必须放在html代码最前面 2、如果有一个文件 有链接，就会先去下载链接的文件，会造成网络堵塞对性能不利 Sass重新定义了import文件， ·在编译文件时将被引用文件合并 ·import可以在文档的任何位置 @import "compass/reset";//normalize:注重通用的方案，重置该重置的，保留有用的样式，进行一些bug修复，统一跨浏览器的默认样式差异，比如统一<p>标签的样式 sass支持css的注释语法 // /**/，会在编译好的css文件中输出 /* * CONTENTS * *SETTING *variables。。。。。。。变量几种存储的文件 * *TOOLS *reset。。。。。。。。。Compass内置浏览器重置样式文件 * *BUSINESS * *BASE *screen.scss。。。。。。。。针对当前站点主页的样式修饰 */查看全部
-
·ruby环境中命令行安装compass -- gem install compass ·创建compass的工作空间 -- mkdir workspace ·进入工作空间创建项目-- compass create learn-compass-init+项目名 { 1、以_开头的文件为局部文件，主要用来被其他的样式文件引入，在编译的时候不会单独的被编译成CSS文件 2、在Sass改变的视乎，必须编译成css才能生效 2-1：按需编译compass compile 2-2：自动编译 compass watch }查看全部
-
Sass&Compass ·自动化css ·在项目周期内更好阻止项目内容查看全部
-
font:{ family:arial; size:16px }查看全部
-
@at-root{这里的样式将被提升到最外层，以提高样式渲染效率}查看全部
-
@extend %a; 样式类a只会用于继承，本身不会被解析到css中查看全部
-
@extend 不能继承嵌套的样式查看全部
-
gem sources -a https://gems.ruby-china.org/ gem install sass gem install sass --version=3.3.0 gem uninstalled sass-3.3.0 gem list查看全部
-
不建议的写法查看全部
-
css模块化查看全部
举报
0/150
提交
取消