sass - 我如何让 Sass 工作？

转载作者：行者123 更新时间：2023-11-28 06:19:24

25

4

这可能是一个愚蠢的问题，但我偶然发现了这个很棒的 CodePen，我想调整和使用它。我在自己的服务器上启动了一个快速演示，但没有用。然后我意识到在 CodePen 旁边它说的是 SCSS，我用谷歌搜索了一下。我有点明白了，但我不知道如何使这个特定的代码工作。

html:

<body>


    <div id="paper"> </div>
    <div class="wrap">
            <a class="two" href="http://db.tt/vkXgwK2P">
                <img class="round" src="http://db.tt/vkXgwK2P" alt="">
            </a>
            <a class="three" href="http://db.tt/Lrtnc768">
                <img class="round" src="http://db.tt/Lrtnc768" alt="">
            </a>
            <a class="one" href="http://db.tt/CSVy5HNR">
                <img  class="round"  src="http://db.tt/CSVy5HNR" alt="">
            </a>


            <figure>
                <img src="http://db.tt/FveX1nYo" alt="">
            </figure>
    </div>

SCSS:

body {
  margin: 0;
}

#paper {
  height: 120px;
  margin: 0;
  background: #303535; 
}

.wrap {
  margin: 0 auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 0 10px white;
  position: relative;
  top: -80px;
  background: #fff;

  a {
    margin: 0;
    position: absolute;
    .round {
      border-radius: 50%;
      width: 180px;
      height: 180px;
      box-shadow: 0 0 0 10px white;
    }
  }
  figure img {
    margin: 0;
    -webkit-transition: top 0.4s ease-out;
    -moz-transition: top 0.4s ease-out;
    transition: top 0.4s ease-out;
    position: absolute;     
    top: 200px;
    left: 77px;
  }
  .two {
    margin: 0;

    -webkit-transition: top 0.4s ease-out;
    -moz-transition: top 0.4s ease-out;
    transition: top 0.4s ease-out;  
    opacity: 0.8;   
    top: 0; 
  }
  .three {
    margin: 0;
    -webkit-transition: top 0.4s ease-out;
    -moz-transition: top 0.4s ease-out;
    transition: top 0.4s ease-out;      
    opacity: 0.8;
    top: 0;
  }
  &:hover .one {
    opacity: 0.8;
  }
  & a.one:hover {
    opacity: 1;
    z-index: 2;
  }
  :hover .two {
    top: 300px;
  }
  & a.two:hover {
    opacity: 1;
    z-index: 2;
  }
  &:hover .three {
    top: 150px;
  }
  & a.three:hover {
    opacity: 1;
    z-index: 2;
  }
  &:hover figure img {
    top: 500px;     
  }
}

还有一个我在 CodePen 上尝试实现的示例:http://codepen.io/CoffeeCupDrummer/pen/FqChm

我认为问题可能出在我的链接语法中，所以我将其更改为如下所示，但这也不起作用。我尝试了 style.css 然后切换到 style.scss 希望修复它。

<link rel="stylesheet" href="stylesheet/style.scss">

所以我的问题是 SCSS 有什么不同，为什么我不能让它在 CodePen 上正常工作？

最佳答案

问题是您必须将 SCSS 编译成 CSS。没有支持 Sass 的浏览器:你必须先用 Sass 编译器编译它，然后链接到编译后的 CSS。 Codepen 会自动为您完成。

如何编译Sass

有两种编译 Sass 的常用方法，它们都会在您更改代码时自动编译您的代码:

使用 Sass gem 附带的 sass 命令行工具
使用一些 GUI 工具，例如 CodeKit或 Compass.App

值得注意的是，Codepen 使用 Compass 编译，我建议使用它而不是普通的 Sass 编译器。除了提供额外的功能和有用的 mixin 库之外，它还使用配置文件 (config.rb) 文件，因此您只需运行 compass watch 命令即可在编写代码时即时编译。

这听起来有点麻烦，但值得您花时间。 Compass 通过其混合库和 Compass 扩展生态系统将 Sass 提升到一个全新的水平:grid systems , tools to make your site responsive , 得心应手 shortcuts和 tools .

关于sass - 我如何让 Sass 工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35703238/

25

4

0

文章推荐： ios - 如何根据标签大小调整 CollectionView 高度

文章推荐： css - @Keyframes 不工作

文章推荐： ios - 自定义单元格中的焦点 UITextfield

文章推荐： javascript - 选项卡内容不变

sass - gulp-sass 不编译 sass 文件
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情，比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。这是我的代码示例: gulp.
继往开来的 Sass 3 代编译器：Ruby Sass、Node-Sass、Dart-Sass
为了简化样式的描述，浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单，但在很多方面都不太方便，比如不支持嵌套，代码比较冗余;不支持继承和混合，代码不好复用等。为了给 c
sass - 介绍 Sass 模块 - 问题 sass-migrator
如何编译sass模块(新版sass)？ https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端，但它没有编译 ht
sass - SASS 错误消息如何显示在浏览器中？
在 SASS 中，当出现错误时，它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。错误文本是如何呈
sass - 我如何在不观看文件的情况下编译.sass
我想决定何时编译.sass文件。换句话说，我不想看文件，而是手动编译。我该怎么做？最佳答案它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
sass - Sass 中具有可变参数列表的一个属性的多个值
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
sass - 如何在不安装的情况下运行 SASS？
我想在我们公司的 Web 应用程序上使用 SASS，但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序，并且还需要 HAML。我希望找到一个脚本
sass - 更改 SASS 的 sass-cache 位置
From the docs我看到您可以更改 SASS 的缓存位置。但是，我不确定要使用的确切语法。我有一个 Zurb 基金会项目，随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
sass - SASS 可以合并属性吗？
也许更好的问题是，有没有更有效的方法来覆盖 mixin 的一部分？这段SCSS: @mixin button { .button { background-color: red;
sass - SASS 中的多行注释抛出错误
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
sass - 有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass (sass-loader 的默认值)？
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
sass - SASS 中的多行注释抛出错误
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
sass - 有没有办法在 Nuxt.js 中使用 sass 而不是 node-sass (sass-loader 的默认值)？
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置； // vue.config.js module.exports = { css: {
sass - 如何在括号文本编辑器中安装 Sass
重复问题？是的。但与this有点不同概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。看了J
sass - Sass 中具有可变参数列表的一个属性的多个值
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
sass - sassOptions 中的数据选项在升级到 v3 后停止在 gatsby-plugin-sass 中工作，并用 sass 替换了 node-sass
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
sass - 如何向 Sass 添加自定义函数(通过 Sass::Script::Functions)？
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.)，但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员，但我确实找到了一个其他人编写的函数，
sass - 在运行 gulp-sass 时，如何找出我使用的 Sass 版本？
我刚开始使用gulp-sass ，是否有一种“简单”的方法来找出正在使用的 Sass 版本？并不是说我认为这太重要了，但我正在使用 gulp-sass在 Visual Studio 2015 (CT
sass - grunt-contrib-sass 和 grunt-sass 的区别
我正在为 sass 实现 grunt 插件到 css 处理，但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。我在互联网上搜索但找不到任何相关答案 grunt-c
sass - 在 sass 函数中使用 css 变量 - node-sass
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken())，据我所知，最新版本的 LibSass 允许这样做。我已安装 node-sas

首页

博学

6Ren·AI

商城

sass - 我如何让 Sass 工作？

如何编译Sass