I cloned a clean copy of zurb/foundation (4fd252238f165709e77c696cd0459bca95f38479), no changes are done with _settings.scss, but some components are not making it to the css file.
git clone git#github.com:zurb/foundation.git
cd foundation
sass --update scss:css
produces foundation.css which starts with breadcrumbs component parts:
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/"; }
Getting frustrated, any ideas?
$ sass -v
Sass 3.4.1 (Selective Steve)
I can tell you sass 3.2.19 works (I just had to downgrade), but that's not an answer, more a work-around.
Related
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
I'm trying to style a link and following BEM principles but I get an error from the sass compiler. here's the html
Link with icon
and here is the sass stuff:
.sg-link {
color: #111;
text-decoration: none;
&-icon {
&:before {
margin-right: 10px;
}
}
&:hover{
color: $maggie;
}
}
Now when sass watch compiles I get this error in the terminal:
error source/scss/atoms/_02-links.scss (Line 7: Invalid CSS after " &": expected "{", was "-icon {"
"-icon" may only be used at the beginning of a compound selector.)
I've used this technique before and always worked so I thought that maybe the sass version has something to do with it. I'm using Sass 3.2.13 (Media Mark). So I checked on sass website and latest version should be Sass 3.4.13 (Selective Steve) but when I try to update with gem update sass it says nothing to update. Tried with sudo too but no luck. Ideas?
EDIT: I've just checked the same code on Sassmeister and it works fine
Thanks in advance
You are correct about the Sass version. Using Sassmeister, you can see that your snippet compiles at Sass v3.4.x, but not at 3.2.x (you can configure the Sass version in the control panel, under the cog icon menu).
As for why you are having trouble updating Sass in your environment is probably beyond the scope of this question, but it could be that your system's version of Ruby/gem is outdated. You might consider a Ruby version management tool like rbenv or chruby for more fine-tuned control over which versions of gems are installed. I suspect that installing rbenv (for example), using it to install the latest version of Ruby, and then installing Sass with gem from there would solve your issue.
(Disclaimer: I'm not super experienced with Ruby, but I've found a setup like the one described above to work well for me.)
I have installed font-awesome 4.0.3 icons using npm install.
If I need to use it from node-modules how should I use it in html file?
If I need to edit the less file do I need to edit it in node-modules?
Install as npm install font-awesome --save-dev
In your development less file, you can either import the whole font awesome less using #import "node_modules/font-awesome/less/font-awesome.less", or look in that file and import just the components that you need. I think this is the minimum for basic icons:
/* adjust path as needed */
#fa_path: "../node_modules/font-awesome/less";
#import "#{fa_path}/variables.less";
#import "#{fa_path}/mixins.less";
#import "#{fa_path}/path.less";
#import "#{fa_path}/core.less";
#import "#{fa_path}/icons.less";
As a note, you still aren't going to save that many bytes by doing this. Either way, you're going to end up including between 2-3k lines of unminified CSS.
You'll also need to serve the fonts themselves from a folder called/fonts/ in your public directory. You could just copy them there with a simple gulp task, for example:
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
You have to set the proper font path. e.g.
my-style.scss
$fa-font-path:"../node_modules/font-awesome/fonts";
#import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
#extend .fa;
#extend .fa-user;
}
Add the below to your .css stylesheet.
/* You can add global styles to this file, and also import other style files */
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
You will need to copy the files as part of your build process. For example, you can use a npm postinstall script to copy the files to the correct directory:
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
For some build tools, there are preexisting font-awesome packages. For example, webpack has font-awesome-webpack which lets you simple require('font-awesome-webpack').
Using webpack and scss:
Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use)
npm install #fortawesome/fontawesome-free
Next, using the copy-webpack-plugin, copy the webfonts folder from node_modules to your dist folder during your webpack build process. (https://github.com/webpack-contrib/copy-webpack-plugin)
npm install copy-webpack-plugin
In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/#fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node_modules.
$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/brands";
#import "../node_modules/#fortawesome/fontawesome-free/scss/regular";
#import "../node_modules/#fortawesome/fontawesome-free/scss/solid";
#import "../node_modules/#fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4` like: `fa fa-address-book-o`
and apply the following font-family to a desired region(s) in your html document where you want to use the fontawesome icons.
Example:
body {
font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
// font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
}
With expressjs, public it:
app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/#fortawesome/fontawesome-free/'));
And you can see it at: yourdomain.com/stylesheets/fontawesome/css/all.min.css
You could add it between your <head></head> tag like so:
<head>
<link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
Or whatever your path to your node_modules is.
Edit (2017-06-26) - Disclaimer: THERE ARE BETTER ANSWERS. PLEASE DO NOT USE THIS METHOD. At the time of this original answer, good tools weren't as prevalent. With current build tools such as webpack or browserify, it probably doesn't make sense to use this answer. I can delete it, but I think it's important to highlight the various options one has and the possible dos and do nots.
Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm
npm install font-awesome --save-dev
after that, I set a static folder for the css and fonts:
app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));
and in html:
<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">
and it works fine!
I came upon this question having a similar problem and thought I would share another solution:
If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:
First, do the steps in this guide:
npm install #fortawesome/fontawesome-svg-core
Then inside your javascript:
import { library, icon } from '#fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })
After the above steps, you can insert the icon inside an HTML node with:
htmlNode.appendChild(fontIcon.node[0]);
You can also access the HTML string representing the icon with:
fontIcon.html
If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.
Install Gulp.js v4 locally and CLI V2 globally.
Install a plugin called gulp-sass using npm.
Create a main.scss file in your public folder and use this code:
$fa-font-path: "../webfonts";
#import "fontawesome/fontawesome";
#import "fontawesome/brands";
#import "fontawesome/regular";
#import "fontawesome/solid";
#import "fontawesome/v4-shims";
Create a gulpfile.js in your app directory and copy this.
const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const fs = require('fs');
function copyFontAwesomeSCSS() {
return src('node_modules/#fortawesome/fontawesome-free/scss/*.scss')
.pipe(dest('public/scss/fontawesome'));
}
function copyFontAwesomeFonts() {
return src('node_modules/#fortawesome/fontawesome-free/webfonts/*')
.pipe(dest('public/dist/webfonts'));
}
function compileSCSS() {
return src('./public/scss/theme.scss')
.pipe(sass()).pipe(dest('public/css'));
}
// Series completes tasks sequentially and parallel completes them asynchronously
exports.build = parallel(
copyFontAwesomeFonts,
series(copyFontAwesomeSCSS, compileSCSS)
);
Run 'gulp build' in your command line and watch the magic.
SASS modules version
Soon, using #import in sass will be depreciated. SASS modules configuration works using #use instead.
#use "../node_modules/font-awesome/scss/font-awesome" with (
$fa-font-path: "../icons"
);
.icon-user {
#extend .fa;
#extend .fa-user;
}
I use twitter bootstrap. In my dev server I connect two less files:
bootstrap.less and style.less:
#import "bootstrap.less";
#gridGutterWidth: 30px;
body {...}
I redefined some bootstrap variables in my style.less. How to convert bootstrap.less and style.less to css in this case?
Twitter Bootstrap team has developed its own tool for CSS - recess. It compiles LESS, optimizes CSS, lints and converts it according to BS's style guidance. It is available as Node package, install it with npm:
npm install recess
You can run it from command-line with:
recess --compile bootstrap.less > bootstrap.css
But preferred way is to use Bootstraps Makefile by running make bootstrap in Bootstrap's folder.
You can either use a tool such as SimpLESS to create the CSS then reference the CSS in your layouts, or you can use Less.js which converts to CSS on the fly, allowing you to still reference your LESS files in the code.
I have a top docked toolbar, and I used firebug to inspect the element to find the css class, which was:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
}
I changed this to:
.x-toolbar-dark.x-docked-top
{
border-bottom-color: #000000;
background-color: transparent !important;
}
Now I see the toolbar as transparent in Firefox, but in chrome it still has the default background color (blue). Why does this happen? Maybe I don't need to use this technique here, but there are definitely instances where I need to find a very specific css class using firebug. Any help or information?
Note: I tried using the Cls attribute of the toolbar with the same result.
In Chrome the background image (it's a gradient) works meanwhile in Firefox it is ignored.
So all you have to do is set the background-image and the background-color of .x-toolbar-dark like this:
.x-toolbar-dark{
background-image: none;
background-color: transparent;
}
http://jsfiddle.net/awHkT/1/
Sencha is for webkit browser, so it's CSS is made for webkit browsers like Chrome or Safari. So this kind or problem must be because there's a CSS rule with a -webkit prefix that is hence only applied on webkit browsers and ignored in firefox.
But anyway, toolbars have a gradient background, so if you want to override it you will need to do like so :
background-image: none;
background-color: transparent;
Two last thing
It's bad practice to override Sencha's CSS. Use the the cls config on you toolbar to assign it a CSS class and then use this class to style your toolbar.
Don't test you app with Firefox, but with Chrome of Safari.
Hope this helps
Can you creating a custom theme installing SASS and Compass. The instructions for installing SASS and Compass vary slightly for Mac and Windows users. Mac users will need to open the Terminal application and type the following:
i. sudo gem install haml
ii. sudo gem install compass
You will need to authenticate with your username and password to complete the install.
Windows users need to open the command line and type the following:
i. gem install haml
ii. gem install compass
Installing Ruby
Mac users get a break, since Ruby is already installed on OSX by default. Windows users should download the Ruby installer from rubyinstaller.org.
Once the installation is complete, we are ready to set up our folders and begin using SASS and Compass.
Creating your custom theme
The next thing you need to do is create your own theme SCSS file. Locate the sencha-touch.scss file in ../lib/resources/sass, and make a copy of the file. Rename the new copy of the file to myTheme.scss.
Now, you need to tell the index to look for your new theme. Using your previous example files, open your index.html file, and locate the line that says the following:
<link rel="stylesheet" href="lib/resources/css/sencha-touch.css" type="text/css">
Change the sencha-touch.css stylesheet reference in your index.html file to point to myTheme.css:
<link rel="stylesheet" href="lib/resources/css/myTheme.css" type="text/css">
SCSS and CSS
Notice that you are currently including a stylesheet from the css folder, called sencha-touch.css, and you have a matching file in the scss folder, called sencha-touch.scss. When the SCSS files are compiled, it creates a new file in your css folder. This new file will have a suffix of .css instead of .scss.
.scss is the file extension for SASS files. SCSS is short for Sassy CSS.
Now that you have your paths set up, let's take a look at the theme file copy we made. Open your myTheme.scss file. You should see the following:
#import 'sencha-touch/default/all';
#includesencha-panel;
#includesencha-buttons;
#includesencha-sheet;
#includesencha-picker;
#includesencha-tabs;
#includesencha-toolbar;
#includesencha-toolbar-forms;
#includesencha-carousel;
#includesencha-indexbar;
#includesencha-list;
#includesencha-list-paging;
#includesencha-list-pullrefresh;
#includesencha-layout;
#includesencha-form;
#includesencha-msgbox;
#includesencha-loading-spinner;
This code grabs all of the default Sencha Touch theme files and compiles them into a new CSS file located in the css folder. If you open up the sencha-touch.css file in the ../lib/resources/css folder, you will see the compressed CSS file you were previously using. This file is pretty huge, but it's all created from the basic commands.
The best part is that you can now change the entire color scheme of the application with a single line of code.
Base color
One of the key variables in the Sencha Touch theme is $base_color. This colour and its variations are used throughout the entire theme. To see what we mean, you change the colour of your theme adding the following to the top of your myTheme.scss file (above all the other text):
$base_color: #d1d3d4; //for example, color gray
Next, you need to re-compile the SASS file to create your stylesheet. From the command line, you need to change into the sass folder where your myTheme.scss file lives. Once you are in the folder, type the following into the command line and hit Enter:
compass compile
And have fun :), this will update your myTheme.css file with the new $base_color value. Reload the page in Safari or FF or anywhere, and you should see a new gray look to your application.
And look at this in http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application
I hope this helps. :)