Sass创建简单的项目

最新推荐文章于 2022-11-13 01:29:49 发布
最新推荐文章于 2022-11-13 01:29:49 发布
阅读量1.7k 收藏
点赞数
分类专栏： css预处理器(sass+less) 文章标签： CSS预处理器Sass使用 Sass的监听 Sass创建简单的项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gao_xu_520/article/details/77731768
版权

一.sass简单搭建

1.创新项目

f盘创建：sassDemo


2.编译成css文件

①运行命令屏幕上显示.scss文件转化的css代码

执行命令：sass   文件名（含路径的文件）

sass sassDemo\sass\test.scss


②显示css内容结果保存成文件

执行命令：sass scss文件  css文件（内容保存的地方）


sass sassDemo\sass\test.scss  sassDemo\stylesheets\test.css


stylesheets文件夹中显示内容：


注意：

要把css放在某文件里面时，需要先创建这个文件夹（如stylesheets），否则会报错



③SASS提供四个编译风格

* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。


生产环境当中，一般使用最后一个选项。

sass --style compressed test.sass test.css


3.开启监听编译（自动生成编译）

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

①Sass的单文件监听

输入命令:sass --watch sass文件(test.scss):css文件（test.css ）

eg:sass --watch sassDemo\sass\test.scss:sassDemo\stylesheets\test.css

当.scss文件夹中的文件发生变化时,会更新.css文件

②Sass的文件夹监听

输入命令: sass --watch sass文件夹名:css文件夹名  

eg: sass --watch sassDemo\sass:sassDemo\stylesheets


当.scss文件夹中的文件发生变化时,会更新.css文件,同时命令行输出提示:



SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。


4.关闭监听

ctrl+c关闭监听



二.使用Compass搭建项目

   (1). Compass是什么?

Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。


   (2).Compass搭建项目

①在f盘创建文件mySass文件

②打开运行命令，执行


compass create mySass\sass

 出现下面：


解释是：

// 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5   
directory sass/
directory sass/sass/                  // sass文件所在目录;
directory sass/stylesheets/           // css文件所在目录;
create sass/config.rb              // 项目配置文件;
create sass/sass/screen.scss       // 主要针对屏幕的sass文件;
create sass/sass/print.scss        // 主要针对打印设备;
create sass/sass/ie.scss           // 主要针对IE浏览器;
write sass/stylesheets/ie.css
write sass/stylesheets/print.css
write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;

You may now add and edit sass stylesheets in the sass subdirectory of your project.
你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;

Sass files beginning with an underscore are called partials and won't be compiled to CSS,
but they can be imported into other sass stylesheets.
Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;

You can configure your project by editing the config.rb configuration file.
你可以通过编辑config.rb配置文件来配置项目信息; 

You must compile your sass stylesheets into CSS when they change.
当Sass文件被修改后,必须要编译Sass文件到CSS;

1. To compile on demand:                   // 直接编译;                      
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:  
compass watch [path/to/project]            // 监听项目变化并且自动编译; 

To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
	<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
将编译后的文件引入到HTML页面中;


f:mySass文件中出现


③开启监听编译

     a./进入项目文件夹, 执行命令：

         cd  mySass\sass     

     b.开启监听，执行命令

        compass watch


④编辑css,在screen.scss （主要针对屏幕的sass文件）



运行命令中会出现



而stylesheets/screen.css （ scss文件编译后对应的css文件;最终将引入到HTML中的文件;）

自动编译成css


       

 (3).在项目中使用，创建index.html

在html中引入的文件还是css文件，是scss自动编译后的文件


预览
面条请不要欺负汉堡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sass 项目架构详解
wjianwei666的专栏
05-30 23
"format": "expanded", // nested 结束大括号在样式后, expanded 结束大括号独占一行, compact 每个元素样式占一行, compressed 没有换行没有空格 5.版本只有缩进和不缩进。他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。"savePath": "~/../css" // 为 null 表示当前目录。
学习笔记--SASS安装及创建
gavincz的博客
03-26 325
关于SASS：SASS 是一种 CSS 开发工具，让 CSS 的处理实现了可编程处理。CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的出现，让 CSS 实现了通过代码编程来实现的方式。SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的 CSS 样式表文件，易于组织和维护。一、SASS安装：SASS 是 Ruby 语言...
项目sass
x1037490413的博客
04-06 281
react项目中下载sass
sass创建web项目环境步骤
weixin_33856370的博客
02-19 104
1）npm创建web前端项目环境步骤 1、新建文件夹，在该文件下进入cmd控制台2、输入命令 npm init 回车3、name:名字只支持小写，不支持大写，将大写的名字改为小写即可4、version:随便写一个5、description:描述6、entry point:index.html 之后可一直回车，7、yes 回车 在根目录文件中看到package.json文件即可。 8、co...
【Sass】sass项目常用用法，新手常用
曹小心的博客
04-14 491
内容不定期更新 只展示在项目的初级用法，最常用的东西；展示不全请见谅 变量 $color:red .color{ color：$color } 嵌套 //css div h1 { 　　color : red; } //sass div { 　　　hi { 　　　　　　color:red; 　　　　} 　} 继承 .class1 { 　　　　border: 1px solid #ccc...
Vue 项目里使用Sass
叶才鑫
10-27 598
在vue-cli创建的项目中使用sass操作
10-14
本文将详细介绍如何在Vue CLI创建的项目中设置和使用Sass。 首先，为了在Vue CLI项目中使用Sass，我们需要安装两个关键的依赖包：`sass-loader` 和 `node-sass`。`sass-loader` 是一个Webpack加载器，用于将Sass源...
Sass项目
02-13
混合模式是Sass的一个强大功能，它允许我们创建可复用的代码块。例如，我们可以定义一个用于圆角的混合模式： ```scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $...
Sass的简单介绍及使用方法
01-14
在这个主题中，我们将深入探讨Sass的基础知识、安装、基本语法以及如何在实际项目中使用它。 首先，让我们了解Sass的安装。Sass通常与Ruby环境一起工作，但也有无需Ruby的解决方案，如使用Node.js的`node-sass`或`...
浅谈gulp创建完整的项目流程
08-28
gulp 创建完整的项目流程 gulp 是前端开发过程中自动构建项目的工具，相同作用的还有 grunt。构建工具依靠插件能够自动监测文件变化以及完成 js/sass/less/html/image/css/coffee 等文件的语法检查、合并、重命名、...
vue项目中引入Sass实例方法
10-16
在Vue项目中引入Sass，可以极大地提升CSS的可维护性和可扩展性，因为Sass是一种预处理器，提供了变量、嵌套规则、混合、函数等高级特性。下面将详细讲解如何在Vue项目中配置和使用Sass。 首先，确保你的开发环境中...
项目中sass管理
05-05 810
下面是Sass Guidelines中的内容（Sass Guidelines中文版本）通常使用7-1模式的结构：7个文件夹，1个文件。基本上，你需要将所有的部件放进7个不同的文件夹和一个位于根目录的文件（通常命名为 main.scss）中——这个文件编译时会引用所有文件夹而形成一个CS
使用sass创建工程
纸上得来终觉浅，绝知此事要躬行
12-11 1440
1.创建工程 1-1.使用sass创建 新建一个文件夹然后在里面直接书写sass文件即可(通常很少直接手动创建) 1-2.使用compass创建 命令:compass create filename 在指定文件夹下面使用命令行创建,会创建出三个文件(sass stylesheets config.rb) 同时可以带参数进行创建:compass create --bare--sass-d
进入虚拟环境运行django项目
whskdnx的博客
08-23 2334
1.创建虚拟环境 创建的虚拟环境在该文件夹 # mkdir -p /data/env # cd /data/env # virtualenv --python=python3 pyweb 进入bin目录 # cd /data/env/bin 进入虚拟环境下 # source activate 在虚拟环境下进入导入的django项目 # cd /home/django/weixin_man...
【项目实战】sass使用基础篇（上）
weixin_44519496的博客
07-05 138
Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。 CSS预处理语言有Scss(Sass) 和Less、Postcss。 Scss和Sass sass一开始用的是一种缩进式的语法格式 采用这种格式文件的后缀名是.sass 在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
scss 项目基础构建
izhaong
07-16 202
// 定义字体大小 @for $i from 12 through 40 { @if $i % 2 == 0 or $i % 5 == 0 { .z-font-#{$i} { font-size: $i + px; } } } // 定义内外边距，历遍1-40 @for $i from 0 through 40 { @if $i % 2 == 0 or $i % 5 == 0 { .z-m-#{$i} { margin:
sass平台项目day3
qq_21154829的博客
07-30 160
用户认证 API与SDK的区别： API：提供url，你去访问这些url并根据提示传参数 【所有第三方工具都有】 request.get(“http://www.xx.xxx/”,json{…})，请求使用 SDK：模块：下载安装模块，基于模块完成功能 下载写好的sms.py,我们install sms然后import sms，最后调用sms.func() redis安装，链接方法https://pythonav.com/wiki/detail/10/82/ 一、实现注册 （1）展示注册页面 建立web的应
SASS教程
最新发布
fvllen的博客
11-13 518
SASS教程
SaaS产品项目实施流程
陈三千的博客
03-01 2692
一、商务洽谈阶段【销售负责】 1.初步接触：甲乙双方初步认识，互相介绍下需求和产品；【对接人，销售部、业务部、采购部】 (1).输入：某大型活动、某渠道资源； (2).输出：客户直接的了解认识； 2沟通交流：对现有产品价值和功能，跟客户演示介绍，介绍我们有什么；【对接人，销售部、业务部、采购部】 (1).输入：现有产品支撑功能； (2).输出：客户的信任和业务满足； 3.深入交流：对客户的需求，进行初步响应讨论和确认，沟通可以做什么；【业务部门，深入需求沟通，形成纪要】 (1).输入：客户的信任； (2).

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值