sass – Page 3 – Tarik Billa

Compass: generate Sprites, plus width / height on each images in the sprite

December 20, 2023 by Tarik

This works: @include all-<map>-sprites(true); But you may want to consider the documented way of using configuration variables: http://compass-style.org/help/tutorials/spriting/ You just specify the config variable before the import. In your case: $ico-sprite-dimensions: true; @import “ico/*png”. @include all-ico-sprites; Sending true to the all include works, but as it’s undocumented, it would seem that configuration variables are the … Read more

How do I output compressed CSS from Compass?

December 19, 2023 by Tarik

In your config.rb file: output_style = :compressed More at http://compass-style.org/help/documentation/configuration-reference/.

Using @font-face with Rails 3.1 app?

December 18, 2023 by Tarik

You have to add the folder to the assets path (to file config/application.rb), see Rails Guides config.assets.paths << “#{Rails.root}/app/assets/fonts” And you should use the asset_path helper: src: url(‘<%= asset_path(‘Chunkfive-webfont.eot’) %>’);

“You must compile individual stylesheets from the project directory” error with compass project [closed]

December 17, 2023 by Tarik

“You must compile individual stylesheets from the project directory” error with compass project [closed]

CSS Specificity Filter

December 17, 2023 by Tarik

You could attempt to take a different approach, try to write your selectors as small (low specificity) as possible. and only make them more specific when needed. With that way of working you don’t need a tool.

How can I setup webpack to minify and combine scss and javascript like CodeKit?

December 11, 2023 by Tarik

Introduction Webpack is mainly a JavaScript-bundler. Its “native” language is JavaScript and every other source requires a loader which transforms it to JavaScript. If you require() an html-file for example… var template = require(“./some-template.html”); …you’ll need the html-loader. It turns… <div> <img src=”https://stackoverflow.com/questions/26851120/./assets/img.png”> </div> …into… module.exports = “<div>\n <img src=\”” + require(“https://stackoverflow.com/questions/26851120/./assets/img.png”) + “\”>\n</div>”; If … Read more

Sass % operator [duplicate]

December 11, 2023 by Tarik

This is a placeholder selector. They are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the … Read more

How to configure Next.js with Antd / Less and Sass / CSS modules

December 11, 2023 by Tarik

Edit: This answer is definitely outdated for current versions of next.js, check the other answers below. After multiple hours of research I found now finally the right solution and wanted to share it: .babelrc (no magic here) { “presets”: [“next/babel”], “plugins”: [ [ “import”, { “libraryName”: “antd”, “style”: true } ] ] } next.config.js: /* … Read more

How to use SASS / SCSS with latest vue-cli starter project?

December 9, 2023 by Tarik

you install the necessary dependencies npm install -D node-sass sass-loader for global styles, simply import the file into main.js: import ‘./styles/my-styles.scss’ in .vue files, add the lang to the <style> element. <style lang=”scss”> If using webstorm: <style lang=”scss” rel=”stylesheet/scss”>

gulp-sass 5 does not have a default Sass compiler; please set one yourself

December 8, 2023 by Tarik

I had this problem and found that adding the standard sass npm npm install –save-dev sass and then adding the second section of the error message to my variable so that it looks like this const sass = require(‘gulp-sass’)(require(‘sass’)); worked.