sass interview questions
Top sass frequently asked interview questions
How do you guys do maintenance on CSS built with Less/Sass?
One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?
Source: (StackOverflow)
I'm going to be starting a new rails web app and after days of research on css frameworks, decided to go with Compass and 960.gs/Blueprint. But now Twitter JUST came out with Bootstrap and I have to say it looks really nice.
I know that Compass is server-side compiled while Bootstrap (which relies on less.js) is all handled on client-side and it also requires JS...But what web app doesn't?
What I like about Bootstrap is all the ready to go features like the top fixed nav and sorted tables and styling. Is there a way to get the same via Compass?
Source: (StackOverflow)
This question already has an answer here:
I've written this code, but it does not work. What is my problem?
.class {
margin:20px;
:hover {
color:yellow;
}
}
Source: (StackOverflow)
I've just been following the Sass tutorial. For some reason though the Sass file is not correctly generating the css. The terminal says the css is invalid but I'm pretty sure it's not. I've tried changing it too just in case there was a problem...
What have I done wrong?
Sass Version: Sass 3.1.10
Error message:
error sass/test.sass (Line 3: Invalid CSS after "80%":
expected expression (e.g. 1px, bold), was ";")
.sass file contents:
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}
Source: (StackOverflow)
Is there a way to use Sass or Compass or anything like that without Ruby?
I have been looking around google and this site and can't find anything, any help would be appreciated. Thank you
Source: (StackOverflow)
From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support.
What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?
Source: (StackOverflow)
I have some fonts being configured in my Scss file like so:
@font-face {
font-family: 'Icomoon';
src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
asset-url('icoMoon.woff', font) format('woff'),
asset-url('icoMoon.ttf', font) format('truetype'),
asset-url('icoMoon.svg#Icomoon', font) format('svg');
}
The actual font file are stored in /app/assets/fonts/
I have added config.assets.paths << Rails.root.join("app", "assets", "fonts") to my application.rb file
and the compile CSS source is as follows:
@font-face {
font-family: 'Icomoon';
src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}
But when I run the app the font files are not being found. The logs:
Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100
Served asset /icoMoon.ttf - 404 Not Found (13ms)
Why isn't the asset pipeline flattening the font files down into just /assets?
Any ideas people?
Kind regards,
Neil
Extra info:
When checking the rails console for assets paths and assetprecompile I get the following:
1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil
1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
path: /Users/neiltonge/code/neiltonge/app/assets/fonts
=> nil
Source: (StackOverflow)
I would like to use google web starter kit. I installed node.js v0.12.0, node-sass & gulp.
And then ran:
$ sudo npm install
When I typed gulp serve then got this error:
Using gulpfile ~/web-starter-kit/gulpfile.js Starting 'styles'... 'styles' errored after 93 ms
Error: `libsass` bindings not found. Try reinstalling `node-sass`? at getBinding
I reinstalled node and gulp but this doesn't help.
What should I do next?
Source: (StackOverflow)
I'm trying to use the calc() function in a Sass stylesheet, but I'm having some issues. Here's my code:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
If I use the literal 50px instead of my body_padding variable, I get exactly what I want. However, when I switch to the variable, this is the output:
body {
padding-top: 50px;
height: calc(100% - $body_padding); }
How can I get Sass to recognize that it needs to replace the variable within the calc function?
Source: (StackOverflow)
I am writing a mixin like this:
@mixin box-shadow($top, $left, $blur, $color, $inset:"") {
-webkit-box-shadow: $top $left $blur $color $inset;
-moz-box-shadow: $top $left $blur $color $inset;
box-shadow: $top $left $blur $color $inset;
}
When called what I really want is that if no $inset value is passed, nothing is output, rather than it compiling to something like this:
-webkit-box-shadow: 2px 2px 5px #555555 "";
-moz-box-shadow: 2px 2px 5px #555555 "";
box-shadow: 2px 2px 5px #555555 "";
How do I rewrite the mixin so that if there is no value of $inset passed, nothing is output?
Source: (StackOverflow)
I am modularizing my stylesheets with SASS partials like so:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues
is there a way to include the whole partials directory(it's a directory full of SASS-partials) like @import compass or something?
Source: (StackOverflow)
I have used LESS.js before. It's easy to use, something like
<link rel="stylesheet/less" rel='nofollow' href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>
I saw SASS.js. How can I use it in a similar way? Parsing a SASS file for use immediately in HTML. It seems like SASS.js is more for use with Node.js?
var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'
sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}
Source: (StackOverflow)
I'm looking into ways to use SASS (Syntactically Awesome StyleSheets) from the Ruby HAML package in an ASP.NET environment. Ideally, I would like compilation of SASS files into CSS to be a seamless part of the build process.
What are the best ways to this integration? Alternatively, are there other CSS-generation tools that are better suited for a .NET environment?
Source: (StackOverflow)
I'm using Sass (.scss) for my current project.
Following example:
HTML
<div class="container desc">
<div class="hello>
Hello World
</div>
</div>
SCSS
.container {
background:red;
color:white;
.hello {
padding-left:50px;
}
}
This works great.
Can I handle multiple classes while using nested styles.
In the sample above I'm talking about this:
CSS
.container.desc {
background:blue;
}
In this case all div.container would normally be red but div.container.desc would be blue.
How can I nest this inside container with Sass?
Source: (StackOverflow)