百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

css利器之sass css sass语法

yuyutoo 2024-10-12 00:00 7 浏览 0 评论

内容导读

前言:Sass为web前端开发而生,它解决了直接进行css编写时权重难以控制,嵌套层级多导致代码编写不方便的问题。并且加入了变量定义,循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。

前言:Sass为web前端开发而生,它解决了直接进行css编写时权重难以控制,嵌套层级多导致代码编写不方便的问题。并且加入了变量定义,循环,判断等类似编程语言的代码模式。极大的提高了编写样式的效率。

sass 配置及基础语法

  • 首先去node官网[ http://nodejs.cn/download/ ],根据不同系统选择不同版本,下载之后进行安装,node -v查看node版本

    image.png

  • 全局安装 npm install node-sass -g

  • 新建文件夹 npm init (初始化项目)

  • 初始化好了后,该空文件夹就会多一个package.json 的文件

    image.png

image.png

  • 在文件夹中新建个a.scss

    image.png

  • npm run sass a.scss b.css 结果如下

    image.png

sass 语法高亮插件

在sublime 里按住ctrl +shift+p,出现弹窗,选择install Package,等待一会,会再次出现一个弹窗,输入sass,选择sass,按住回车即可(我已安装sass,所以不会在出现)

image.png

image.png

sass与css同步

  • npm-sass --watch (sass文件名) (css文件名)

基础语法

  • sass 提供了 & 用于引用父选择器。

    image.png

  • 群组选择器

    image.png

  • sass声明变量以$开头

    image.png

定义属性时,其写法为#{ 定义的属性变量 }

image.png

  • 全局变量和局部变量

    image.png

目前还没有发现sass在sublime里面提示功能,如有知道的,可在评论区指点,谢谢

相关推荐

YAML配置文件简介及使用(yaml 配置)

简介YAML是"YAMLAin'taMarkupLanguage"(YAML不是一种标记语言)的缩写。相比JSON格式的方便。...

教你如何解决最常见的58种网络故障排除方法

1.故障现象:网络适配器(网卡)设置与计算机资源有冲突。分析、排除:通过调整网卡资源中的IRQ和I/O值来避开与计算机其它资源的冲突。有些情况还需要通过设置主板的跳线来调整与其它资源的冲突。2.故障现...

一分钟带你了解服务器网卡(服务器网卡怎么用)

今天小编和大家聊一下服务器的网卡。什么是网卡?简单说网卡就是计算机与局域网互连的设备。计算机主要通过网卡接入网络。网卡又称为网络适配器或网络接口卡NIC(NetworkinterfaceCard)...

linux文件之ssh配置文件的含义与作用

ssh远程登录命令是操作系统(包括linux和window系统)下常用的操作命令,可以帮助用户,远程登录服务器系统,查看,操作系统相关信息。linux系统对于ssh命令有专门保存其相关配置的目录和文件...

Cilium 官方文档翻译 - IPAM(二)Kubernetes Host模式

KubernetesHostScopeciliumIPAM的kuberneteshost-scope模式通过选项ipam:kubernetes开启,将集群IP地址分配委托给每个独立的节点,并...

域名劫持跳转,域名劫持跳转的解决办法只需5步

简单来说,域名劫持就是把原本准备访问某网站的用户,在不知不觉中,劫持到仿冒的网站上,例如用户准备访问某家知名品牌的网上商店,黑客就可以通过域名劫持的手段,把其带到假的网上商店,同时收集用户的ID信息和...

Linux基本命令(linux基本命令总结)

...

Linux 磁盘和文件系统管理(linux磁盘管理fdisk)

1检测并确认新硬盘...

windows host文件怎么恢复?局域网访问全靠这些!

windowshost文件怎么恢复?windowshost文件是常用网址域名及其相应IP地址建立一个关联文件,通过这个host文件配置域名和IP的映射关系,以提高域名解析的速度,方便局域网用户使用...

Nginx配置文件详解与优化建议(nginx 配置详解)

1、概述今天来详解一下Nginx的配置文件,以及给出一些配置建议,希望能对大家有所帮助。...

Mac电脑hosts文件锁定,如何修改hosts文件权限

有时候我们需要修改hosts文件,但是网上很多教程都行不通,使用sudo命令也不行。其实有一个很简单的方法。打开终端命令行,使用如下命令即可:sudochflags-hvnoschg/etc/...

windows电脑如何修改hosts文件?(windows 修改hosts文件)

先来简单说下电脑host的作用hosts文件的作用:hosts文件是一个用于储存计算机网络中各节点信息的计算机文件;作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中...

Vigilante恶意软件行为怪异:修改Hosts文件以阻止受害者访问盗版网站

Sophos刚刚报道了一款名叫Vigilante的恶意软件,但其行为却让许多受害者感到不解。与其它专注于偷密码、搞破坏、或勒索赎金的恶意软件不同,Vigilante会通过修改Hosts文件...

hosts文件无法修改几种现象和解决方法

第一种、hosts文件修改完不是直接保存而是弹出另存为窗口解决:1、右击hosts文件——属性——把“只读”前面勾去掉。第二种、打开hosts文件时提示“你没有权限打开该文件,请向文件的所有者或管理员...

hosts文件位置在哪里,教你hosts文件位置在哪里

Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的I...

取消回复欢迎 发表评论: