CSS预处理器Sass详解利用CSS的Sass预处理器（框架）来制作居中效果学习CSS预处理器:Sass和less进行对比

 //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 body { background: #eee; font-size:12px; } p{ background: #0982c1; } 

 //sass style or less style #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } //css style #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 

 //sass style or less style a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } } //css style a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; } 

 //sass style .funky { font: { family: fantasy; size: 30em; weight: bold; } } //css style .funky { font-family: fantasy; font-size: 30em; font-weight: bold; } 

 //sass style .funky { font: 20px/24px { family: fantasy; weight: bold; } } //css style .funky { font: 20px/24px; font-family: fantasy; font-weight: bold; } 

 /*被导入sass文件a.scss，less文件a.less：*/ //a.scss or a.less //------------------------------- body { background: #eee; } /*需要导入样式的sass文件b.scss，less文件b.less：*/ @import "reset.css"; @import "a"; p{ background: #0982c1; } /*转译出来的b.css样式：*/ @import "reset.css"; body { background: #eee; } p{ background: #0982c1; } 

 //sass style /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a { color: green; } //css style /* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }

 //sass style //------------------------------- $fontSize: 12px; body{ font-size:$fontSize; } //less style //------------------------------- @fontSize: 12px; body{ font-size:@fontSize; } //css style //------------------------------- body{ font-size:12px; } 

 //sass style //------------------------------- $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:1.5; } /*覆盖默认值*/ //sass style //------------------------------- $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } //css style //------------------------------- body{ line-height:2; } 

 //sass style //------------------------------- $borderDirection: top !default; $baseFontSize: 12px !default; $baseLineHeight: 1.5 !default; //应用于class和属性 .border-#{$borderDirection}{ border-#{$borderDirection}:1px solid #ccc; } //应用于复杂的属性值 body{ font:#{$baseFontSize}/#{$baseLineHeight}; } //css style //------------------------------- .border-top{ border-top:1px solid #ccc; } body { font: 12px/1.5; }

 //一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px); 

 //sass style //------------------------------- $linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值 a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); } } //css style //------------------------------- a{ color:#08c; } a:hover{ color:#333; } 

 $heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

 //sass style //------------------------------- $headings: (h1: 2em, h2: 1.5em, h3: 1.2em); @each $header, $size in $headings { #{$header} { font-size: $size; } } //css style //------------------------------- h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } 

 //Sass style $color:red; p{ $color:blue; color:$color;//blue } a{ color:$color;//blue } //Less style @color:red; p{ @color:blue; color:@color;//blue } a{ color:@color;//red } 

 //sass style @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //less style .center-block { margin-left:auto; margin-right:auto; } .demo{ .center-block; } //css style .demo{ margin-left:auto; margin-right:auto; } 

 //sass style @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } .opacity-80{ @include opacity(80); //传递参数 } //less style .opacity(@opacity:50) { opacity: @opacity / 100; filter: alpha(opacity=@opacity); } .opacity-80{ .opacity(80); //传递参数 } //css style .opacity-80{ opacity: .8; filter: alpha(opacity=80); }

 //sass style @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } //less style .horizontal-line(@border:1px dashed #ccc, @padding:10px){ border-bottom:@border; padding-top:@padding; padding-bottom:@padding; } .imgtext-h li{ .horizontal-line(1px solid #ccc); } //css style .imgtext-h li { 
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：CSS 垂直水平居中的5种最佳解决方案CSS水平垂直居中解决方案(6种)利用css设置元素垂直居中的解决方法汇总CSS实现垂直居中的4种思路详解css实现元素水平垂直居中常见的两种方式实例详解CSS水平垂直居中的几种方法总结css让容器水平垂直居中的7种方式利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS设置文字图片垂直居中的方法总结深入理解CSS行高line-height与文本垂直居中的原理23种CSS垂直居中技巧
                                                                
下一篇：详解CSS 3 中的 calc() 方法css3中的calc函数浅析巧用CSS3的calc()宽度计算做响应模式布局的方法CSS3 calc()会计算属性详解浅谈css3中calc在less编译时被计算的解决办法CSS3 Calc实现滚动条出现页面不跳动问题 CSS3的calc()做响应模式布局的实现方法CSS3 函数技巧 用css 实现js实现的事情(clac Counters  Tooltip)深入理解CSS中的数学表达式calc()