Sass 基础(一)

  css 是一些非常简单得语句的组合,既然简单的语句,就不可避免的有很多重复的,冗余的东西,而且没有传统 编程语言变量,控制语句等高级特性,所以造成了css 编写低效,往往需要查找替换,大量复制来修改或者编写。Sass 是用 弥补这些缺陷的,使开发更加的方便快捷,更加方便管理。   1.Sass和SCSS的区别。     文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名     语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而   SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。     例如:Sass语法       $font-stack: Helvetica, sans-serif //定义变量       $primary-color: #333 //定义变量

      body         font: 100% $font-stack         color: $primary-color     例如:SCSS语法         $font-stack: Helvetica, sans-serif;         $primary-color: #333;     body {       font: 100% $font-stack;       color: $primary-color;     }    编译出来的 CSS     body {       font: 100% Helvetica, sans-serif;       color: #333;     }

在使用的页面时依然引用.css文件。 Sass中编译出来的样式风格可以按不同的样式风格显示。   1.嵌套输出方式nested     例如:

	                nav {
 			           ul {
    				            margin: 0;
    				            padding: 0;
    				            list-style: none;
 			          }
 			           li { display: inline-block; }
  			          a {
    				            display: block;
    				            padding: 6px 12px;
    				            text-decoration: none;
 			            }
		        }

    编译出来的风格:

                                nav ul {
  			              margin: 0;
 			               padding: 0;
 			               list-style: none; }
		                    nav li {
    			              display: inline-block; }
		                   nav a {
  		                             display: block;
  		                              padding: 6px 12px;
  			              text-decoration: none; }

    2.展开输出方式expanded

		      例如:	
		                   nav {
 			               ul {
    				                margin: 0;
    				                padding: 0;
    				                list-style: none;
 			                }
 			           li { display: inline-block; }
  			          a {
    				            display: block;
    				            padding: 6px 12px;
    				            text-decoration: none;
 			             }
		          }
		
		      编译出来的风格:
		
			        nav ul {
  				            margin: 0;
  				            padding: 0;
 				            list-style: none;
				          }
			        nav li {
  				          display: inline-block;
				        }
			        nav a {
  				          display: block;
  				          padding: 6px 12px;
  				          text-decoration: none;
			        }

    3.紧凑输出方式 compact

		      例如:
		                	nav {

 			             ul {
    				                margin: 0;
    				                padding: 0;
    				                list-style: none;
 			          }
 			         li { display: inline-block; }
  			        a {
    				          display: block;
    				          padding: 6px 12px;
    				          text-decoration: none;
 			           }
		        }
		
		    编译出来的风格:
		      nav ul { margin: 0; padding: 0; list-style: none; }
		      nav li { display: inline-block; }
		      nav a { display: block; padding: 6px 12px; text-decoration: none; }

  4.压缩输出方式compressed     

		     例如:
			             nav {
 			           ul {
    				            margin: 0;
    				            padding: 0;
    				            list-style: none;
 			            }
 			           li { display: inline-block; }
  			          a {
    				            display: block;
    				            padding: 6px 12px;
    				            text-decoration: none;
 			             }
		        }
		  编译出来的风格:
		      nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;
		          text-decoration:none}

  声明变量用“$”开头,       $width:300px;       "$":变量声明符       width: 变量名称       300px 变量值   全局变量与局部变量     在选择器、函数、混合宏...的外面定义的变量为全局变量       例如:         .block {             color: $color;//调用全局变量           }         em {             $color: red;//定义局部变量         a {             color: $color;//调用局部变量           }         }       span {         color: $color;//调用全局变量       }     编译后:       //CSS         .block {             color: orange;           }         em a {           color: red;           }        span {         color: orange;         }

      $color 就是一个全局变量,而定义在元素内部的变量,比如 $color:red; 是一个局部变量。       什么时候声明变量?           1.该值至少重复出现了两次;           2.该值至少可能会被更新一次;           3.该值所有的表现都与变量有关(非巧合)。       Sass 的嵌套分为三种:         选择器嵌套         属性嵌套         伪类嵌套       例如:在css 会这样写

	        nav a {
  		            color:red;
	          }
	      header nav a {
  		          color:green;
	      }
      	    在sass中
	    nav {
  		      a {
    		        color: red;
    		       header & {
      			      color:green;
    	      }

  嵌套-属性嵌套   Sass中提供属性嵌套,css有一些属性前缀相同。   例如用到的样式:

	  .box{
		    border-top:1px solid red;
		    border-bottom:1px solid green;
	  }

  在Sass中我们可以这样写:

  .box {
  		    border: {
   		    top: 1px solid red;
   		    bottom: 1px solid green;
 		     }
	  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

前端相关片段整理——持续更新

在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数)

9710
来自专栏逍遥剑客的游戏开发

J2ME 的优化措施

20170
来自专栏前端说吧

Sass-学习笔记【基础篇】

41740
来自专栏owent

JSON显示库 -- showJson (Javascript)

现在的web的js开发很方便啊,但是碰到iframe里的东西还是不方便看到变量的内容,所以就写了这么个看json内容的玩意,还可以当控制台输出用。

7610
来自专栏Hongten

python开发_textwrap文本样式

在看python的API的时候,发现python的textwrap在处理字符串样式的时候功能强大

12420
来自专栏从零开始学自动化测试

python爬虫beautifulsoup4系列4-子节点​

前言 很多时候我们无法直接定位到某个元素,我们可以先定位它的父元素,通过父元素来找子元素就比较容易,简单一点来说就是通过父亲找儿子。 一、子节点 1.以博客园...

35470
来自专栏菜鸟前端工程师

JavaScript学习笔记015-Promise0Async0try catch

11620
来自专栏全栈之路

golang教程

这里有两个关键点。 - 其一是defer关键字。defer语句的含义是不管程序是否出现异常,均 在函数退出时自动执行相关代码。 - 其二是Go语言的函数允许返回...

68220
来自专栏懒人开发

AndroidStudio简单使用(二):左侧Structure

上面有说, 可以通过 Alt + 7 快捷键 调出来。 个人觉得, 这个对于查看代码结构,还是很方便的。直接可以看到代码的大体结构。 我们以 android...

36820
来自专栏我的技术专栏

《effective Go》读后记录:GO基础

25040

扫码关注云+社区

领取腾讯云代金券