FAQ Database Discussion Community


Using Susy SASS-framework w/ multiple partial files

sass,susy-sass
I'm using the Susy SASS-library. I'm compiling one main SASS-file that @imports various partial SASS-files. Inside the partials I use Susy-mixins. Do I need to @import "Susy" for every single partial SASS-file? What's the smart way to do this?

Scss variable benefits?

css,css3,sass
Hi i am doing scss for the first time and have some doubts. Consider i make a variable $multipler : 10px; and use it for all the properties where i have to give the value in px. Then if i want font size to be 20px somewhere i will use...

How to write .class1 > class2 {} in SASS?

css3,sass
How can I write this code in SASS in different ways? .class1 > .class2 {...} which can be applicable for + ~ etc. ...

SASS conditional for global override

sass
I am trying to implement an idea where I can individually set a bottom border for heading tags (h1,h2,h3,h4), but also have a global override switch. Something like this: $h1-border: 4px solid #CCCCCC; $h2-border: 4px solid #CCCCCC; $h3-border: 4px solid #CCCCCC; $h4-border: 4px solid #CCCCCC; ...but if I set something...

Sass: Extending nested selectors

css,sass
(I think I should mention this, I've only recently started using Sass/SCSS) http://jsfiddle.net/DriftingSteps/t6kLncfm/ You can see how <strong> is inheriting the properties of the global <a> as well as the properties from nested <a> tag. a { color: #09f; text-decoration: none; &:hover { text-decoration: underline; opacity: 0.6; } } ul...

Different gutters with susy sass

sass,compass,susy-compass,susy
I have this susy settings: $susy: ( columns: 8, gutters: 1/4, global-box-sizing: border-box, ); Sometimes I need different gutters instead 1/4. See image for example: And the code: .wrap { @include clearfix; @include container (500px); .box-1 { @include span(4 of 8); } .box-2 { @include span(4 of 8 last); }...

Select only direct children from element with Sass

css,sass
Lets say I have the following html: <header class="header"> <div class="title"> <h1>Home</h1> </div> <div class="logo"> <img src="#" alt="Logo"> </div> <div class="account"> <div class="options"> </div> <div class="search"> </div> </div> </header> And I have the following SCSS: header { height: 4.1rem; div { width: 33%; float: left; height: 4.1rem; line-height: 4.1rem; color:...

DIV must always define display and position or not or what is default

html,css,html5,css3,sass
After searching a lot I cannot find the answer I am looking for. I am a TABLE user currently editing my old site to new tech but I have a question: <div style="background:#6666; here: we go; display:block; position:relative;> test </div> Does I must set always to all divs the display...

scss error on rbga 256 color

css,sass
My designer gave me this css: .wrapper { margin:10px auto 0; border:5px solid #3c3c3c; background:rgba(256,256,256,0.80); } It works fine in a css file, and he says it is valid (I guess that is how he does transparency) When I put it in a scss file it gives this error: $red:...

Custom grid in foundation?

sass,zurb-foundation,zurb-foundation-5
I need a different sized grid within the standard grid layout. I'm using sass and have tried: .row-30{ @include grid-row($total-columns: 30); } Here's the HTML: <div class="row-30"> <div class="small-5 columns">a 5 col</div> <div class="small-1 columns end">a 1 col</div> </div> I'm having no luck though. Where am I going wrong with...

SASS and Bootstrap - mixins vs. @extends

css,twitter-bootstrap,sass
I'm using the SASS port of Bootstrap, and I'm wondering if there's any difference between using the pre-defined mixins and using SASS's @extends. For instance, if I have <div class="wrapper"> Some content here.... </div> is there any difference between doing .wrapper { @include make-row(); } and .wrapper { @extends .row;...

SCSS calculation with multiple values

css,sass,mixins
SCSS @function space($parent-width, $width...) { @return $width + $parent-width; } CSS .box { padding: space(2px, 25px 40px 50px 60px); } Result .box { padding: 25px 40px 50px 60px2px; } I wanted to create a simple function that execute the below result: Expected result .box { padding: 27px 42px 52px 62px;...

Netbeans: Sass “Compile Sass Files on Save” Checkbox missing

netbeans,sass
I run Netbeans 8.0.2 on Windows. The checkbox "Compile Sass Files On Save" was there before I installed Sass. I installed Sass, configured the path in Netbeans. C:\Ruby193\bin\sass.bat Now this dialog is missing. Does anybody knows how to get it back? Or why it's gone?...

Grunt SASS Invalid property name appearance

css,sass,gruntjs,autoprefixer
When using the following SASS code .select select -webkit-appearance: none -moz-appearance: none appearance: none I'm getting a "Invalid property name" when compiling via Grunt. The problem seems to be the line with "-moz-appearance: none". I'm using Autoprefixer, but it doesn't support the appearance property (https://github.com/postcss/autoprefixer#why-doesnt-autoprefixer-support-appearance). What's the best way to...

How to center align Zurb Foundation block grid elements that are being pushed to the next row?

html,sass,zurb-foundation
I'm using the block grid from the Zurb Foundation framework but I'm having some issues getting it to align the way I want to. I have it set so that it displays 4 blocks per row. I have more than 4 blocks so the ones that don't fit are pushed...

Set variable value based on screen size [duplicate]

css,css3,sass
This question already has an answer here: Using Sass Variables with CSS3 Media Queries 3 answers I'm using sass. I want to add button paddings depending on the screen size. My only requirement is to have button padding: 8px 8px; for small screens and button padding: 5px 8px; for...

Changing one property in a Sass variable with multiple properties

sass
I have a Sass variable $box-shadow containing the value 10px 10px 1px 0 rgba(0,0,0,.3); I would like to define another variable $box-shadow-alt in which the h-shadow property (the first 10px in this case) should be an inverse of that in the original variable. Is there a Sassy way of changing...

Rails - How to pass Sprockets::Context in manual sass compiling

ruby-on-rails,sass,sprockets
I'm using the following code snippet to manually compile a sass manifest with some variable overrides appended. template = File.read("#{Rails.root}/app/assets/schemes/#{scheme}/css/styles.css.scss") scheme_variables.each do |key, value| template << "$#{key}:#{value};\n" end engine = Sass::Engine.new(template, { :syntax => :scss, :cache => false, :read_cache => false, :style => :compressed, :filesystem_importer => Sass::Rails::SassImporter, :load_paths => MyApp::Application.assets.paths,...

Meteor: Load scss files in a certain order

meteor,sass
I'd like to know how to load scss files in order when using Meteor. Not using Meteor, I would make something like application.scss and load .scss files in order so that stylesheets loaded later can depend on mixins/variables loaded earlier. And then I'd load application.scss in my template. application.scss @import...

converting scss file to css using sass compiler

sass,compass-sass
Please refer to the css section of this codepen: http://codepen.io/anon/pen/JddzEJ it has a bunch of sass code. I am trying to run that on my local machine. I install sass and compass using gem. After that I ran the following command on the terminal: sass --watch slider.scss:slider.css Now this is...

gulp concat scss with css

sass,gulp
I'm currently want to improve my gulp file. I want to concat the compiled scss with normalize.css in one task using stream. Actually I'm doing it like this. var gulp = require('gulp'), runSequence = require('run-sequence'), minifyCss = require('gulp-minify-css'), sourcemap = require('gulp-sourcemaps'), concat = require('gulp-concat'), scss = require('gulp-ruby-sass'); var path =...

Sass converts black automatically to #000000 [duplicate]

css,sass,compass
This question already has an answer here: Sass color variable hex output 2 answers I'm currently writing a mixin to easily add multiple fonts in one line. In the mixin I write all the weights I want to use like this: $font-weights: ( "hairline": 100, "thin": 200, "light": 300,...

managing a radius value in sass over multiple sheets

css,sass
So i have just picked up SASS.. awesome tool, but i cannot find the answer to one question before i start.. What is best practice with SASS for managing a variable value to be referenced in mulitple sheets. For example, a radius set to 5px.. /* coreValues.scss */ $radiusNormal :...

Can’t set custom font when using SASS - Ionic framework

css,sass,ionic-framework,font-face,compass-sass
I would like to set a custom font using SASS. I was able to do that when I was using the default configuration with style.css file but when I try to run the same code on ionic.app.scss it doesn't work. //style.css @font-face { font-family: 'Bariol_Regular'; src: url('../lib/ionic/fonts/Bariol_Regular.eot'); src: url('../lib/ionic/fonts/Bariol_Regular.eot') format('embedded-opentype'),...

Meteor application not pushing to Heroku error

heroku,meteor,sass,bourbon
I built a Meteor app that uses the bourbon scss library. I tried to push my app to heroku got the following error: Errors prevented bundling: While building the application: client/styles/bullets.scss: Scss compiler error: undefined /tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/bullets.scss:1: file to import not found or unreadable: "bourbon/bourbon" Current dir: /tmp/build_52129b38b75a2e6238de86ec866d89cf/mauvsa-gala-9a1eb00877caedf4b5202f30825b1627fb75f874/client/styles/...

Gulp compiling SLIM/SASS/CoffeeScript on fly

coffeescript,sass,gulp,slim-lang
There is the following Gulp file with tasks: // gulp var gulp = require('gulp'); // plugins var connect = require('gulp-connect'); var jshint = require('gulp-jshint'); var uglify = require('gulp-uglify'); var minifyCSS = require('gulp-minify-css'); var clean = require('gulp-clean'); var slim = require('gulp-slim'); var coffee = require('gulp-coffee'); var sass = require('gulp-sass'); // tasks...

Javascript event change style with sass mixin

javascript,jquery,events,sass,width
I am working on a site with a sidebar. When you press the button the sidebar comes in from the left and pushes the main body away. The sidebar has a width of 280px and a max width of 80% (for mobile devices). At the moment my javascript looks like...

Using a gulp project on another machine

sass,gulp
I have gulp set up and working fine on one machine. I have copied the directory to another machine which includes the package.json file that includes all the project dependencies. Each time I run 'gulp' on the new machine it runs through the task but always finishes with Error: Gem...

jQuery toggleClass only works for a split second, then it reverts back to how it previously was

jquery,sass,jade,toggleclass
So this is my first question ever on stackoverflow, sorry if I ask this poorly or have failed to find the answer elsewhere. I am using a simple toggleClass jQuery function to add a class called .slide-out that gives the whole body a left: 30% value. If I manually add...

Undefined operation: “500px gte medium-screens”

sass
I'm trying to combine Jake Archibald's mobile-friendly IE sass mixins... http://jakearchibald.github.io/sass-ie ...with the responsive mixins illustrated by Dan Cederholm in his book 'Sass for Web Designers'. I'm using CodeKit to compile the files (detailed below). all.scss compiles successfully, but all-old-ie.scss fails. CodeKit says: Error: Undefined operation: "500px gte medium-screens". on...

need to generate css from scss file on windows 8.1 using gruntjs compass

css3,sass,gruntjs,grunt-contrib-watch
I am working on a and facing problem to generate tabs.css file from the tabs.scss that is being provided . I have tried all possible options. I am able to successfully generate tabs.js under dist/ folder but failing to generate tabs.css. I have run the following commands also: npm install...

Compass vendor prefixes does not include Opera prefix

sass,compass,vendor-prefix
I've installed compass recently to get benefit from its features, especially the vendor prefixes. When I do something like this : @include box-sizing(border-box); I get : -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; But what about other prefixes like Opera prefix -o-box-sizing ?...

Compiled SASS into CSS is not showing my images or fonts

css,image,fonts,sass,preprocessor
So I compiled my SASS into one css file using codekit 2 on their own localhost and the website looks perfectly fine. However when I upload my website onto a webserver (including all my SASS and CSS) it will not show some of my images. Then when I remove the...

use css3 to add display:block but with a delay

css3,sass
Wondering if there is a way to add display:block; inline, but with a small 3 second delay... without JS, and with CSS(3) inline with styles .janet-place{ $width: 138; $height: 452; width: rcalc($width); margin-left: rcalc(50); margin-top:rcalc(31); padding:hcalc($height,$width) 0; display: block; // here after 3 seconds @include bkgrd_image('animation/gown.png'); &.gown{ display: block; //...

rake assets:precompile > Sass::SyntaxError: Invalid CSS after “}”: expected “}”, was “”

ruby-on-rails,sass
I was running: RAILS_ENV=production rake assets:precompile --trace Then I get this error stack: ** Invoke assets:precompile (first_time) ** Invoke assets:environment (first_time) ** Execute assets:environment ** Invoke environment (first_time) ** Execute environment ** Execute assets:precompile rake aborted! Sass::SyntaxError: Invalid CSS after "}": expected "}", was "" (sass):40696 /usr/local/rvm/gems/[email protected]/gems/sass-3.4.13/lib/sass/scss/parser.rb:1165:in `expected'...

SCSS Mixins: How to pass in a pseudo class via a variable?

sass,mixins,pseudo-class
I have the following mixin. It only returns code if the global $legacy variable is true. $legacy: true !default; @mixin legacy($element: "body", $legacy: $legacy) { @if $legacy == true { #{$element} { @content; } } } I want to use pass in a pseudo-class for the $element variable. E.g. .ad...

SASS vs. CSS attributes including concatenated classes

css,sass,css-selectors
here is a sample of some CSS that is compiled by SASS: #affinity-page.header.slide.hasSubnav { height: 50px; } the question I have is, is the multiple concatenated periods a SASS element or a native CSS selector method? If it's native CSS I'm wondering, does it mean, "Having this id, AND this...

Can't get compass running and working

ruby,sass,compass
I have sass installed on my laptop and really wanna try out compass with it, but I really can't get it worked on PHPstorm. (not even on my pc) The problem starts already with installing it with ruby I tried to install just the gem with sudo gem install compass...

Scss dependency inside scss file using bower

sass,dependencies,bower
I'm developing a scss framework similar to bootstrap for my own projects. This project is a registered bower package. And in my scss files I'm depending on another bower package that i need to @import in my other scss files. It seems that just declaring dependency in the bower.json file...

Specify an attribute value using the parent selector in LESS/SCSS?

sass,css-selectors,less
Is is possible to use the parent selector in LESS/SCSS to specify a value for a parent attribute selector? I want the following output: [some-attribute] { font-weight: normal; } [some-attribute~="bold"] { font-weight: bold; } Given this (obviously incorrect) example: [some-attribute] { font-weight: normal; &~="bold" { font-weight: bold; } } Is...

Rendering a dynamically generated background based on width

html,css,ruby-on-rails,sass,haml
So I have a background image attribute (as a string referencing an image in the project), that belongs to a Badge table. I'm rendering each background image based on the current path. But I want to render different images at two different max-widths. For example, .badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"} renders a background...

Why node-sass-middleware is not working?

javascript,node.js,express,sass
I have installed the node-sass-middleware module on my express application, but i'm not getting that working, just because the middleware is reading an incorrect source, when i debug the console log is: GET / 200 558.983 ms - 4651 source: /home/karim/Snippets/my-financial/public/stylesheets/sass/stylesheets/main.sass dest: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css read: /home/karim/Snippets/my-financial/public/stylesheets/stylesheets/main.css which both directories are wrong,...

Should I add the sass source map to my git repo?

css,git,sass
I had added style.css.map to my .gitignore file thinking that this was some kind of internal file that was not needed for public consumption. Now I'm seeing that when Chrome (not Firefox) loads my page, it is looking for style.css.map and returning a 404. I'm not explicitly asking it to...

Building Ionic Sass using Compass still looking for Removed Sass task

sass,gulp,ionic,gulp-sass,gulp-compass
Using an ionic blank template with its default gulpfile and running: ionic setup sass I can build the application's Sass, but I wanted to add Compass. So using Gulp I added the below code to my gulpfile based on gulp-compass examples: gulp.task( 'compass', function( done ) { gulp.src( './scss/ionic.app.scss' )...

Zurb Foundation adjust topbar dropdown height

css3,sass,zurb-foundation,zurb-foundation-5
I have adjusted the height of topbar within _topbar.scss to 76 though this also seems to be affecting the dropdown // Height and margin $topbar-height: rem-calc(76) !default; I have changed around 430 to the following, which reduces the height of the dropdown, but then pushes the top margins out on...

Error using Grunt watch and SASS

node.js,sass,gruntjs
I am trying to use grunt watch t with SASS on Windows, but everytime I get an error Waiting... OK >> File "scss\main.scss" changed. Running "sass:dist" (sass) task Error: Error generating source map: couldn't determine public URL for the source stylesheet. No filename is available so there's nothing for the...

rails uninitialized constant Sprockets::SassCacheStore

ruby-on-rails,ruby,sass,gem,sprockets
I'm new to rails and trying to do some playing around with gems and such. My case here is that I have this navigation menu on my website and I needed to get the current_page link selected.. rather than building a helper I wanted to install a gem so I...

How do I make this lightbox I am creating only open on the div I am clicking?

javascript,jquery,html,css,sass
I am working on an effect here, I will post the code as well, but here is the basic premise. I have a div containing 2 divs and one hidden div called test. When I click the containing div I want the hidden div (which is called "test") to animate...

Not last child mixin SASS

sass,mixins
Is it possible to turn this: .redstripe p:not(last-child) { border-bottom:1px solid red; } Into a mixin so that I can apply it to any element and assign a child tag to it like: @mixin redstripe (this.$children):not(last-child) { border-bottom:1px solid red; } And then apply: div { @include redstripe(p); } What...

Explanation of unexpected nesting with @extend in SASS

sass
I have a nested class .super & and I cannot figure out why the .one_two--alt class is being prefixed by the .super class even though the markup suggests it shouldn't. SCSS .one{ &__two{ color: red; &--alt{ @extend .one__two; } .super &{ color: blue; } } } Outputed CSS: .one__two, .one__two--alt...

Where to get versions suitability sheet of neat and bourbon?

sass,rubygems,bourbon
I want so use libsass for compiling my scss (considering positive testimonials about it's speed against ruby native compiler). The compiling ends with an error, and my searching have driven me here: (my bourbon was 4.x): https://github.com/sass/libsass/issues/365. the current version of libsass cannot compile bourbon 4.x. and the issue is...

Sublime text sass build system: compressed with comments

css,wordpress,sass,sublimetext2,sublimetext
I have two sass build systems installed in my sublime text: sass and sass compressed. The problem is that sass compressed delete all my comments what is pretty bad for the native wordpress style because the first comment block is needed there. Is it possible to create a build system...

Applying &:before to top level of menu only

css,sass
I have the following html structure that I cannot edit: <div id="menu"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a> <ul class="sub-menu"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li>...

Rails App: pipeline asset not working as expected

css,ruby-on-rails,ruby-on-rails-4,sass,asset-pipeline
I'm a ruby and rails novice so please have patience with me. I have a SASS file (stats.css.scss) in rails that is loaded correctly in my development enviroment, but doesn't get loaded in my production enviroment. I know is the asset pipeline that is causing this, but have made several...

Watch multiple directories using gulp-sass

sass,gulp,gulp-sass
I have .scss files in two different directories: ./blog/styles/ ./common/styles/ There is a file in ./blog/styles called blog.scss and I'm importing .scss files from ./blog/styles/ (i.e. same directory) and ./common/styles/. How should I create gulp task to watch both these directories and create final .css files somewhere else (say in...

sass file not compiled by gulp

css,node.js,sass,npm,gulp
I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile....

Strange SASS output when using extends

css,sass
I have the following SASS files _android.scss: $width: 111px; @import 'child'; .android .child { @extend %child; } _ios.scss: $width: 999px; @import 'child'; .ios .child { @extend %child; } _child.scss: %child { width: $width; } app.scss: @import 'ios'; @import 'android'; Now when I run sass I get: $> sass app.scss .ios...

What is the difference between `bower install foundation` and `foundation new MY_PROJECT`

sass,gruntjs,zurb-foundation,gulp,bower
On the foundation github page the recommended way to install foundation is bower install foundation yet in their documentation they suggest using foundation new MY_PROJECT. On the documentation page the first method is only listed under the "using a task runner" section. Both methods give different file structures. Are both...

Compiling SASS files using Grunt creates an unnecessary folder

javascript,css,sass,gruntjs
So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out. Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder: This is how...

Why Susy gives 49.15254% in output CSS instead of 50%?

css,grid,sass,frontend,susy-compass
I've made decision to get started with Susy, because I wanted good framework just for grids. Unfortunately I found myself trying hard to make exact what I want. After all I want to know why Susy gives so strange math rules. There are my Susy's simple setings: $susy: ( columns:...

How to make this div appear outside of a container with overflow-y:auto?

css,sass,css-position
http://codepen.io/leongaban/pen/waMpwZ I'm building a hover div to be used in an Angular directive. This hover div appears anywhere there is a tag button. Currently my problem here is when the tag button is inside of this tag-column with the property overflow-y: auto; The hover appears stuck inside the column. I...

Use SASS to dynamically add color stops to linear-gradient

css,sass,compass-sass
Using SASS, I am trying to create a dynamic linear-gradient, so if I have an array of colors, I would like to loop through it and add each color to the gradient. @import "compass"; $colors: red green blue; $numColors: length($colors); div { $g: nth($colors, 1); @for $h from 2 to...

Can I override a scss style in Prestashop?

css,sass,prestashop
I'm using a default theme in Prestashop 1.6 and I have a problem. What I'm trying to accomplish is to simply move the navbar 25px higher. I know that I need to remove or change #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which is located not in the modules directory,...

Sass breakpoint doesn't work

sass,media-queries,compass-sass,breakpoint-sass
I've checked all possibilities, and haven't seen any issue. config.rb Have following line: require 'breakpoint' style.scss also @import "breakpoint"; I'm trying this way: $medium: 96rem; // or even $medium: 51rem 96rem; .any-class{ @include breakpoint($medium); //change any property } I don't see any effect in compiled css file, only new properties...

Rotating images on a circular path using CSS/SASS

css,css3,sass,css-animations
I came across Hugo Giraudel's excellent tutorial on arranging images on a circle using SASS/CSS, and I am trying to take it another step further by animating the rotation of the circle of images. I have modified a codepen showing one of a variety of unsatisfactory results I am getting....

How to add unit to a number in SASS [duplicate]

css,sass
This question already has an answer here: Adding a unit to a number in Sass 1 answer I would like to know how I can add a unit to a certain number of a variable in SASS: $number: 10; padding: $number / 2 & px; the & does not...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

css,css3,sass,compass
This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

reorder columns with bourbon neat (tablet, desktop)

sass,bourbon
I'm trying to make a page with "content" on the top (for mobile view) and the sidebar below. Here is my html: <section> <div class="homepage-content"></div> <div class="homepage-sidebar"></div> </section> Here is my scss using bourbon: section { @include outer-container; } .homepage-content { @include span-columns(8); @include shift(4); /* this block should be...

What kind of CSS preprocessors is more popular and usable SASS or SCSS? [closed]

css,sass,preprocessor,frontend
I think that SASS is better than SCSS. In SASS not needed to use brackets and have the other good features. What do you think about it? Which of them is better for you?

When using Libsass/Grunt is there a way to watch files on the fly?

css,sass,gruntjs,zurb-foundation-5,libsass
I have installed Foundation 5 using >gem install foundation And then creating a new project using the command >foundation scratch --libsass The main reason being is that I'm on Windows and I really don't need/want to be using compass. I know that after I make changes to my sass files...

Autoprefixer: Not adding prefixes

css,sass,grunt-contrib-watch,libsass
Trying to get autoprefixer working with Grunt, Livereload and node-sass. I don't seem to be getting anything prefixed. Below is my Gruntfile.js: module.exports = function(grunt) { // Project configuration. grunt.initConfig({ autoprefixer: { options: { browsers: ['last 8 versions'], map: true }, dist: { files: { 'css/styles.css': 'css/styles.css' } } },...

@include outer-container not taking default defined in grid-settings

sass,bourbon,neat
So I've got my _grid-settings.css.scss defined as per the docs and in it, among some of the other default overrides is $max-width: 1200px;. Part of the contents of my override: $visual-grid: true; $visual-grid-color: green; $visual-grid-index: front; $visual-grid-opacity: 0.2; $column: 90px; $gutter: 30px; $grid-columns: 8; $max-width: 1200px; I know this is...

Sass: Adding variable suffix to all selectors in a DRY way

sass
I'm putting together a style framework for the sake of familiarizing myself with sass and building out interfaces quicker. Needless to say, I am not that great with sass. Any criticism is welcome. There are plenty of frameworks out there, but you commonly see selectors prefixed with some string unique...

How to get a SASS nested nested media query to work with the use of the media query or operator

css,sass,nested,media-queries
I am trying to get a nested IE10+ media query to work in SASS and am not understanding the output. I think that things are getting weird with the use of the media query or operator ,. As a result, this query will not apply in all cases because the...

How to make :hover more mobile friendly and accessible? [closed]

css,user-interface,mobile,sass,user-experience
I'm using SCSS to make a dropdown menu. Here is an excerpt of how it works: li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: $menuBG; color: $menuColor; cursor: pointer; transition: all 0.2s; &:hover { background: $hoverBG; color: $hoverColor; } Now what I'd...

Avoid double writing styles

html,css,sass
I would like to know how I can avoid writing certain styles twice if they are the same for an element and it's possible pseudo classes: .element { color: #a0c225; &:hover { color: #a0c225; } &:focus { color: #a0c225; } } and I don't want to repeat the color #a0c225...

CSS Class with Argument from HTML in Less\Sass\JQuery? [closed]

jquery,css,sass,less
I have got something like that: <div class='myclass'> <span class='myclass-value-1' value='1'>1%</span> <span class='myclass-value-2' value='2'>2%</span> ... <span class='myclass-value-99' value='99'>99%</span> <span class='myclass-value-100' value='100'>100%</span> </div> I want to create 100 different styles (e.g. different shade of color, or different width - which can be calculable by value from HTML Tag) for every element...

Compass Line Number Comments Not Showing Up with Gulp

css,sass,gulp,compass
I am attempting to make the switch from GruntJS to Gulp and have run into a problem with my Gulp task for processing my SASS files via Compass. The files compile just fine into the single CSS file as they did under my GruntJS implementation, but I am missing the...

Managing remote sass workflow

sass,workflow
I'm kind of just getting started with PHP development and using Sass for my css in building a site. I downloaded MAMP and built out the site on my local machine, so the PHP worked great, and the sass was automatically compiled locally for me. Now usually when I have...

Ampersand not working in :before in SASS

css,sass
I'm building spritesheet buttons, something like this: <a class="Button one"></a> <a class="Button two"></a> With style: a { // Add basic background and styling background: transparent url("images/background_image.png") no-repeat; // Add icon on top &:before { content: ''; display: block; //.... background: transparent url("images/icons.png") no-repeat; // (1) &.one { @include tile(165px, 0,...

grunt watch and sass is not compiling. It just notices change

javascript,sass,gruntjs
I cannot figure out why my 'grunt watch' command will not compile. It is only finding that a change has been made but then it will not actually compile it into my sass. Here is my gruntfiles.js module.exports = function(grunt) { var devPath = 'dev/'; var distPath = 'dist/'; grunt.initConfig({...

Yeoman - Gruntfile.js generates source map at build but deletes it after any changes

sass,gruntjs,yeoman,yeoman-generator,gruntfile
I installed Yeoman with angular generator, and it created Gruntfile.js. The problem is that after launching the webserver in the terminal with: grunt serve Yeoman generates main.css with in the end the reference of the source map /*# sourceMappingURL=main.css.map */ But after changing any scss the watch routine regenerates it...

Elixir not creating multiple css files

css,laravel,sass,laravel-elixir
Tried to find an awnser to this question but could not find it here? I'm using Laravel Elixir and got the following in my gulpfile: mix.sass(['app.scss', 'admin.scss'], 'public/css'); Can someone tell me why it is not creating two css files but compiles it into one? How can I achieve it...

Trying to run a Gulp script that needs ruby on PHPStorm

ruby,shell,sass,gulp,phpstorm
I've edited a simple Gulp pipeline (that i've tested and works outside the IDE) and i'm now trying to include it into PHPStorm Project in order to achieve a better css workflow in a real project. This is the script, (it's a simple css optimization pipeline): var gulp = require('gulp'),...

@font-face mixin for Scout App

css,sass
I am new to sass. I am using Scout App to compile my scss. I have seen several mixin examples for @font-face using Compass or other compilers like the example below: @include font-face("PacificoRegular", font-files("pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg"), "pacifico/Pacifico-webfont.eot"); I have never seen any example for how to use @font-face mixin for...

Sass Foundation Underscores Project Structure, removing git folder and package.json file

wordpress,git,sass,zurb-foundation,gulp
I am attempting a test dev setup of a foundation/underscores wordpress theme. I have a wordpress install, and to that I added an underscores theme. I then made a folder in this called foundation and installed foundation ( sass using bower ) into that. I will get it all working...

Message appears when running scsslint

sass,gruntjs
I am following the step by step on https://www.npmjs.com/package/grunt-scss-lint I have installed everything, and seems to be working fine when I type in Terminal 'scss-lint'. However I want this to be running in Grunt Gruntfile: scsslint: { allFiles: [ 'src/scss/**/*.scss', ], options: { bundleExec: true, config: '.scss-lint.yml', reporterOutput: 'scss-lint-report.xml', colorizeOutput:...

How to propery define nested elements?

css,sass,susy-sass,susy
Given I have the following markup: <body> <article> <div class="foo">Foo</div> <div class="bar">Bar</div> </article> </body> The body has a fixed width of 910px: body { @include container(910px); } The body has an article element, which consists of 2 nested divs (.foo and .bar). At this point, if I wanted .foo and...

Pass pseudo element selector as variable in SASS [duplicate]

css,sass,css-selectors
This question already has an answer here: Can I use variables for selectors? 3 answers I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin @mixin pseudoawesome($fa-symbol, $pseudo) { &$pseudo { // <-- here is the error content:...

How can I add additional information to an attribute selector via nesting in Sass?

css,sass,css-selectors
I'm trying to avoid "class'itis" and leverage SASS nesting to achieve the following CSS output: a[class^="utility-button"], a[class*=" utility-button"] { //some shared css rules} .utility-button-one {//some unique css rules} .utility-button-two {//some unique css rules} This is what i'd like to be able to do (what i've currently tried): a[class^="utility-button"], a[class*=" utility-button"]...

How can I enforce brackets in a transform statement with sass?

sass,css-transforms
I would like to build a transform statement dynamically in sass (as a mixin parameter) and I am unsure how to enforce the brackets. $dir: translateY; $val: 42; $i: 3; .test { transform: #{$dir}(#{$val * $i}) scale(1); } should transform into .test { transform: translateY(126) scale(1); } It does exactly...

How to compile .sass files on save in Visual Studio 2015

asp.net,sass,gruntjs,visual-studio-2015
How can one get a full sass (i.e. scss) precompiler environment up and running in Visual Studio 2015? This is a sibling question to this one concerning less.

sass-rails depends on sass v3.2, I need sass v3.4. What is sass-rails' “gemfiles” directory for, and will it help me use sass v3.4?

ruby-on-rails,ruby,sass,gemfile
I have a project that requires sass v3.4, but sass-rails currently has this in its sass-rails.gemspec: s.add_dependency 'sass', '~> 3.2.0' The latest version (master branch) has gone backwards even more: s.add_dependency 'sass', '~> 3.1' From github, I can see that sass-rails works with sass v3.4 and has testing for it....

Simplifying sass attribute selectors

css,sass,mixins
I'm trying to come up with a way to simplify some SCSS attribute selectors. What I end up with is: [data-attr="opt1"] { ... } [data-attr="opt2"] { ... } [data-attr="opt3"] { ... } What I'm hoping for is to be able to write something closer to: [data-attr] &="opt1" { ... }...

Sass loader not working in webpack

node.js,sass,webpack
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command: ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer...

Rails Sass: variables arenot passed with @import

css,ruby-on-rails,ruby,twitter-bootstrap,sass
I have a rails project which uses twitter bootstrap and sass. The scss files are structured into folders so i have a better overview. Now I want to define a file for global variables which contains my colors etc. and pass those values down to other files so I have...

gulp concat after sass

sass,gulp,concat,gulp-concat
I would like to take the sass output and concat it to another css regular file. example: animate.css app.scss return gulp.src('app.scss') .pipe(sass({ errLogToConsole: true })) .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE])) .pipe(gulp.dest(paths.public+'css/')) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('css/')) .on('end', done); any ideas how to do it? ******* IDEA maybe is it possible to generate the...

Grunt autoprefixer error when using @extent in scss file

sass,gruntjs,autoprefixer
Error: Running "autoprefixer:dist" (autoprefixer) task File .tmp/styles/documentation.css created. Warning: Can't parse CSS: Missing property value at line 66:21 in .tmp/styles/main.css Use --force to continue. Line 66 points to the following code: Source: span { @extent .md-body-1; } p { @extent .md-body-1; } I can't extent a tag in scss? Or...

How can I automatically generate minified css from scss?

css,sass
I'm making edits to a project that uses scss. As I work locally the changes I make to the scss are reflected on my local server. However, there are minified css files that are part of the project and I feel like I should update those as well. Is there...

flask-assets - sass don't resolve relative path in @import scss directive

python,flask,sass,flask-assets
i have flask application with buildout environment ./bin/pip show flask | grep Version Version: 0.10.1 ./bin/pip show flask-assets | grep Version Version: 0.10 in src folder src/setup.py have following strings setup( name = 'spf', install_requires = [ 'flask', 'flask-assets', ], entry_points = { 'console_scripts': [ 'spf_dev = spf.manage:dev', /* see...