bourbon

I am not able to use node-bourbon in the project

依然范特西╮ 提交于 2020-01-14 11:46:07
问题 I try to use npm module for scss files. Node-bourbon. I get the following error: with: function() { var paths = Array.prototype.slice.call(arguments); return [].concat.apply([bourbon.includePaths], paths); } }; Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require(" in C:\Users\gwk736\GitLab\Inform\node_modules\node-bourbon\index.js (line 1, column 1) @ ./src/app/header/header.component.ts 20:21-55 My scss first line: @import "~node-bourbon"; My component: import {

I am not able to use node-bourbon in the project

天涯浪子 提交于 2020-01-14 11:42:53
问题 I try to use npm module for scss files. Node-bourbon. I get the following error: with: function() { var paths = Array.prototype.slice.call(arguments); return [].concat.apply([bourbon.includePaths], paths); } }; Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require(" in C:\Users\gwk736\GitLab\Inform\node_modules\node-bourbon\index.js (line 1, column 1) @ ./src/app/header/header.component.ts 20:21-55 My scss first line: @import "~node-bourbon"; My component: import {

Sass watch is detecting changes but not compiling to css

限于喜欢 提交于 2020-01-02 02:43:12
问题 When I run sass --watch app.sass:app.css terminal shows that changes have been detected to sass but won't compile to css. I am using Bourbon so all my .scss and .sass files are imported via mixins. ex. >>> Sass is watching for changes. Press Ctrl-C to stop. >>> Change detected to: css/2-modules/top-nav.scss 回答1: Make sure the file you are saving with an _filename.scss has been properly imported into the mainfile.scss . if you have not imported the _filename.scss it will detect a change but

How can I use two css frameworks in one rails app? (Using foundation and bourbon neat on same app)

你。 提交于 2019-12-25 16:44:51
问题 I have a rails app that was built using foundation 3 (not using the gem. It is located in vendor/assets/stylesheets/foundation.min.css). And I want to gradually convert my styling code to Bourbon/Neat. One thing I have to have in mind is not to break the previous layouts while I'm not done with the recoding. Is it possible to do this? rails version: 3.2.13 ruby: 1.9.3 回答1: For any given page in your app, you can include whatever styling you want by including the stylesheets on that page. So

Unable to use Bourbon Refills

有些话、适合烂在心里 提交于 2019-12-25 02:47:35
问题 I am trying to use refills bourbon to use their css libraries. from what I understand, all I have to do is copy and paste their css and html and it should work. But the css doesn't take effect when I try it out. I have added the link to the css file and added jquery links and it still doesn't work. From what I know, ruby is not necessary when using fillers. Please advice if I am missing any steps Thanks. HTML file <!DOCTYPE HTML> <html> <head> <title></title> <link rel="stylesheet" href=

Bourbon/Sass: #{$all-text-inputs} with hover or focus?

时光毁灭记忆、已成空白 提交于 2019-12-23 19:00:56
问题 According to the Bourbon docs, you can use #{$all-text-inputs} to turn this: #{$all-text-inputs} { border: 1px solid green; } into this: input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"] { border: 1px solid green; } Is there a way with Bourbon

Container padding in Neat/Bourbon

两盒软妹~` 提交于 2019-12-14 04:22:17
问题 I am working with Neat the first time. I am wondering how I can accomplish a padding for the outer .container. When giving the container a padding, the width of the columns within aren't right anymore and shift to the right/left. Like this one: <header> <div class='container'> <div class='logo'> <img alt='Logo' src='assets/images/logo.png'> </div> </div> </header> .container { @include outer-container; padding-left: 15px; padding-right: 15px; } header { .logo { @include span-columns( 3 ); } }

How to do a three column grid with bourbon neat?

折月煮酒 提交于 2019-12-12 03:56:54
问题 I'm trying to create a three column grid, and have the columns evenly distributed across the row. My markup is simple: <div class="row"> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> <div class="col"> </div> </div> My scss is also pretty straight-forward. .row { @include outer-container ; } .service { @include span-columns(4) ; } However the result is a mess: That's close to what I want. But the blocks are all over

Bourbon's @font-face mixin

久未见 提交于 2019-12-11 13:54:20
问题 I'm new to Bourbon & SASS and trying to use the @font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app. Bourbon provides the following examples: @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular'); @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold); @include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic); // Rails asset-pipeline - place fonts in app/assets/fonts/

如何在同一元素上组合背景图像和CSS3渐变?

大城市里の小女人 提交于 2019-12-10 21:06:39
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 如何使用CSS3渐变作为 background-color ,然后应用 background-image 以应用某种透光的纹理? #1楼 我有一个实现,需要进一步推广这种技术,并希望概述我的工作。 以下代码执行相同的操作,但使用SASS,Bourbon和图像精灵。 @mixin sprite($position){ @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2)); } a.button-1{ @include sprite(0 0); } a.button-2{ @include sprite (0 -20px); } a.button-2{ @include sprite (0 -40px); } SASS和Bourbon负责跨浏览器代码,现在我需要声明的只是每个按钮的精灵位置。 对于按钮的活动状态和悬停状态,可以很容易地扩展此主体。 #2楼 如果您还想设置图像的 背景位置 ,则可以使用以下方法: background-color: #444; // fallback background: url('PATH-TO-IMG') center center no