`
zhangyaochun
  • 浏览: 2609040 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

《hand by hand to learn sass》一

    博客分类:
  • sass
阅读更多

 

  前言

 

       其实sass出来都不知道多久了,但是针对N多不了解或者了解了没实践的同学,还是hand by hand一下吧,希望能帮助到你!

 

  

  正文

 

       本系列开篇就不介绍sass是什么了,有兴趣直接百度,本文直接教你如何安装环境?

 

  • 需要ruby

      下载地址: http://rubyforge.org/frs/?group_id=167&release_id=28426

 

       如图:选择1.9.2-p180下载

 

  
 

 

  • 下载完成后,双击安装, 如下图, 建议对Add Rudy那个打上勾


      
 
 

  • 安装完成后,在开始菜单,选择Start Command


      
 

 

  • 输入:gem install haml

    
     
 

  • 输入:gem install sass

    
     

 

 

  • 成功后,在D盘建立一个sass的文件夹,然后建立一个1.sass的文件,内容直接粘贴官网


        
 

      代码直接粘贴:

 

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

 

  • cd到对应的sass文件目录(比如:d盘的sass文件夹),在执行


        
 

 

  • 查看文件目录,发现会编译出一些新文件,如图

   
         
 

  • 我们看看style.css编译生成的内容,如图

      

        
 

 

  • 大小: 20 KB
  • 大小: 30.7 KB
  • 大小: 39.9 KB
  • 大小: 12 KB
  • 大小: 13.7 KB
  • 大小: 12.3 KB
  • 大小: 16.7 KB
  • 大小: 4.1 KB
  • 大小: 4.7 KB
  • 大小: 17.5 KB
分享到:
评论

相关推荐

    Pragmatic Guide to Sass 3

    《Pragmatic Guide to Sass 3》是一本由Hampton Lintorn Catlin与Michael Lintorn Catlin共同编写的关于Sass(Syntactically Awesome Style Sheets)的专业指南。本书旨在帮助前端开发者更好地理解和运用Sass这一...

    Pragmatic Guide to Sass.pdf

    This book is for people who know the pain of working on the CSS of a mature website—who have faced a CSS file that four people wrote and that mutated into a huge, sprawling, incoherent mess....

    英文原版-Sass and Compass in Action 1st Edition

    For 15 years, we’ve been using CSS to patiently paint the web by hand. No more! Sass and Compass add scripting and a library of components to standard CSS so you can simplify stylesheet authoring, ...

    node-sass安装包

    **Node-Sass:一个强大的CSS预处理器** Node-Sass是基于LibSass的JavaScript绑定,它允许开发者在Node.js环境中使用Sass语言进行编写、编译CSS。Sass是一种流行的CSS扩展语言,提供了诸如嵌套规则、变量、混合、...

    node-sass.zip

    1. 变量:Sass允许定义变量,便于在整个样式表中复用值,如颜色、字体大小等。 2. 嵌套规则:CSS的类选择器可以通过嵌套写法变得更加清晰,避免了过多的空格和逗号。 3. 混合(Mixins):类似于函数,可以定义一组...

    node-sass和sass-loader下载.zip

    `sass-loader`则是webpack的一个插件,它的作用是在webpack构建流程中处理Sass文件。当webpack遇到.scss或.sass文件时,`sass-loader`会调用`node-sass`来编译Sass代码,然后转换为CSS,最后与其他CSS文件一起被...

    node-sass 4.12、4.14.1、5 node-sass-loader node_modules 安装包

    Node-Sass是Sass编译器的一个实现,它是用JavaScript编写的,并且利用了Node.js环境。它允许开发者在Node.js环境中使用Sass语言,使得前端开发人员可以利用Sass的强大功能,如嵌套规则、变量、混合模式等,来编写更...

    sass-json-vars, 将变量导入到Sass中.zip

    sass-json-vars, 将变量导入到Sass中 Vars @import json数据到 Sass $variables 。重要:的最新版本 sass-rails 被锁定到 Sass 3.2. 这意味着 Sass映射不能用于 sass-json-vars 解析嵌套对

    sass语法官方规范

    SASS (Syntactically Awesome Style Sheets) 是一种预处理CSS语言,它通过增加强大的功能,如变量、嵌套规则、混合(mixins)、继承、函数等功能,使得CSS更加灵活、模块化且易于维护。本文将详细介绍SASS语法的关键...

    Sass全面解析.pdf

    Sass是一种功能强大的CSS预处理器,它增加了CSS所没有的功能,比如变量、嵌套规则、混合器、选择器继承等,极大地增强了CSS编程的能力。Sass的原意是“Syntactically Awesome Stylesheets”,意味着它不仅是一套CSS...

    sass for sublime t3

    【Sass for Sublime Text3】是一款专为Sublime Text3设计的插件,用于提供对Sass语言的语法高亮支持。Sass是一种预处理器语言,它扩展了CSS,添加了变量、嵌套规则、混合、函数等功能,使得CSS编写更加简洁、可维护...

    Sass的的一个Dart实现Sass使CSS又有趣

    Sass,全称Syntactically Awesome Style Sheets,是一种预处理器语言,它扩展了CSS,为样式表添加了变量、嵌套规则、混合、函数等编程特性,使得CSS编写更加简洁、可维护。这里提到的"Dart实现"指的是Sass的一种实现...

    Sass(3.4.21)中文文档

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言,引入了许多强大的特性,如变量、嵌套规则、混合、函数等,使得CSS编写更易读、可维护。Sass 3.4.21是这个预处理器的一个版本,此...

    sass全站设计

    #### 一、SASS简介与优势 SASS(Syntactically Awesome Style Sheets)是一种CSS预处理器语言,它扩展了CSS的功能,并使其更加易于维护和扩展。通过使用SASS,可以实现变量、嵌套规则、混合(mixin)、继承选择器等...

    webpack的Sassloader用于将Sass编译成CSS

    在处理CSS及其预处理器如Sass时,Webpack提供了一系列的加载器(Loader),其中Sass Loader是专为处理Sass文件而设计的。下面将详细阐述Sass Loader在Webpack中的工作原理、安装与配置,以及与其他相关工具的配合...

    前端技术之Sass教程.zip

    Sass(Syntactically Awesome Style Sheets)是一种CSS预处理器,它扩展了CSS语言,提供了变量、嵌套规则、混合(mixins)、函数等高级特性,使得CSS编写更易维护和扩展。本教程将深入探讨Sass的基础知识及其在前端...

Global site tag (gtag.js) - Google Analytics