zoukankan      html  css  js  c++  java
  • Sass安装和配置

    1.搭建环境(简单的下载安装Ruby)下载安装Ruby,Windows下的Ruby下载,Mac OS X 就跳过这一步,Linux自己去找吧(这部分用户的强项)


    建议安装的时候勾选下,这样可以直接通过cmd命令行操作(不必手动添加Path)2.安装SASS完成第一步之后,在开始菜单中找到并运行Ruby命令行,如图



    启动可以看到命令行窗口,安装SASS(LESS安装方法相同),在命令行键入如下代码(其实官网顶部所列的三条即为常用的)并回车:

    		gem install haml


    如下图所示:



    安装成功如下图所示:


    3.创建SASS项目不使用其他任何库的SASS
    首先进入到你本地项目目录下,我的放在e盘中,如下所示:



    		e:


    这个时候就进入了项目目库中:

    例如我们要创建一个项目,其名称叫作“mysass”:

    		mkdir mysass


    此时mySass这个项目就在E:mysass中了,要是你不放心,你可以使用ls命令查验一下:

    		ls


    为了让项目规化的更完美一些,我把.scss的SASS文件都放在sass目录中,而需要转译出来的.css文件都将放在css目录中。因此,我们还需要在mySass项目中创建sass和css两个文件夹:
    进入mysass文件夹中创建sass目录和css目录



    4.普通SASS的转译接下来打开编辑器,新建一个文件,并且在里面编辑一段简单的SASS代码,如下所示:

    		$main-color: #ce4dd6; 
    		$style: solid; 
    		.navbar { 
    			border-bottom: { 
    			color: $main-color; style: $style;
    			 } 
    		 } 
    		 a { 
    			 color: $main-color;
    		 	 &:hover { 
    			 	 border-bottom: 1px $style; 
    			  } 
    		  }


    并且将此文件命名为style.scss保存在mySass/sass下。
    转译出来的CSS样式为:

    		.navbar { 
    			border-bottom-color: #ce4dd6; border-bottom-style: solid;
    		 } 
    		a {
    			color: #ce4dd6; 
    		  } 
    		a:hover { 
    			border-bottom: 1px solid; 
    		}


    使用sass转译.scss文件,有一个不足之处,就是我们修改了.scss文件,不会自动转译。如果要时时刻刻看到修改sass转译后的css,只需要在sass命令的基础上添加一个参数--watch就可以。
    为了验证这样的说法,我们先把刚才转译出来的style.css删除,然后通过sass --watch命令重新转译一回:

    		$ sass --watch sass/style.scss


    这样一来,你可以看到提示:

    		>>> Sass is watching for changes. Press Ctrl-C to stop. overwrite sass/style.css

    sass/style.scss转译到sass/style.css下,并没有转到css目录中,这是他不足的一处。转译出来的在不在css目录下,我想你并不会太在意(大不了到时copy一下),而关心的是,他是不是如前面所说的,可以时间监控转译.scss文件。

    摘自:http://ued.ctrip.com/blog/?p=3417
    http://uecss.com/sass-less-how-to-install-and-use.html
    参考:http://www.w3cplus.com/preprocessor/organize-that-sass.html

  • 相关阅读:
    Django REST framework的解析器与渲染器
    python基础之 数据格式化
    REST framework 之 分页
    Django REST framework 之 认证 权限 限制
    DjangoRestFrameWork 版本控制
    DjangoRESTFrameWork中的视图
    浏览器跨域问题
    初识REST
    vue之生命周期
    vue组件
  • 原文地址:https://www.cnblogs.com/2boy/p/3532807.html
Copyright © 2011-2022 走看看