I recently started using bootstrap SCSS on my node project. So I have app/bower_components/bootstrap-sass/lib/_glyphicons.scss for example.
Looking at my CSS output I see things like:
#media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
display: inline-block;
}
I have 2 questions:
This seems like a security hole. Everyone can deduce something about my OS and directory structure simply by looking at my CSS. What is the correct way to close this security hole?
How does it work? I nearly got it figured out, but I am missing something. Looking at the SCSS, I see bootstrap is using $icon-font-path which apparently turns into this absolute path. Looking at compass documentation, I see they provide absolute values but no $icon-font-path
This is the piece of code I am referring to:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('#{$icon-font-path}#{$icon-font-name}.eot');
src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}
Both answers are correct. To sum it up, there's no magic.
Bootstrap initializes $icon-font-path with a default value.
if you include bootstrap's SCSS in a manager that requires a different value for $icon-font-path you should also override their default value.
The syntax $icon-font-path: some_value !default; means - use this value if not already set.
So when you include you should do the following
/* override icon-font-path value and include scss */
$icon-font-path: bower_components/bootstrap/fonts;
#include bower_components/bootstrap/bootstrap.scss;
paths might be different in real scenarios.
This seems to be a standard mechanism for publishing a reusable SCSS modules.
Here is the variables file where they set the $icon-font-path variable.
It looks like $icon-font-path is set to the foldername of the font files. not necessarily a security hole because its a relative path to the fonts.
The -sass-debug-info mess is rudimentary "source mapping", so browser developer tools can show you the original line number and filename of the Sass rule that generated that CSS (instead of the line number for the generated CSS).
Firebug has a FireSass plugin that understands these annotations. I think Chrome has built-in support, but it might be behind an experimental flag.
It has nothing to do with fonts; font-family is just used because it's an easy way to shove a string into CSS in a way that's still accessible to JavaScript without actually affecting the rendering of the document. It also has nothing to do with Bootstrap; this is part of the scss compiler.
It won't be there in compressed output, which I hope you're using in production. :)
#guy mograbi: In Bootstrap-SASS-3.3.6, $icon-font-path in /bootstrap/bootstrap/_variables.scss #83 is declared like this:
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
Since $bootstrap-sass-asset-helper is not defined yet, it may be useful to include the _variables.scss before overwriting the $icon-include-path, so we can read the "settings" and overwrite the $icon-font-path together with the if() cases.
We can use something like:
#include bower_components/bootstrap/bootstrap/_variables.scss;
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "/fonts/bootstrap/");
#include bower_components/bootstrap/bootstrap.scss;
Related
I'm hacking some SASS code (I've never seen any SASS before, I've only used plain old CSS2 in the past) and feel like I don't really understand what does #include media-query($variable) mean. I've tried googling it but surprisingly it doesn't seem to find any kind of manual or example for this code. As far as I understand it is used to define a medium-specific rule to apply a different style when the web page is rendered on a mobile device and in fact this is what I need but I feel like I have to understand the exact meaning of the code to use it correctly.
#include media-query($variable)
is a mixin call.
you should have somewhere in your sass files a mixin declaration like this:
#mixin media-query($variable) {
// ...
}
I am adding a custom font in my project when I am adding this font using normal CSS that time it's working but when I am using this font in SCSS processor CSS that time it's not working.
I am sharing the screen shot of file and console error.
I do not find where I am doing wrong. Please resolve my problem.
The message is pretty much self-explanatory. The issue is you are using = instead of a : to assign the value to the variable. It should be
$roboto-Regular: 'robotoregular';
Don't be so specific with the variable names, variables are meant to hold dynamic data. If tomorrow, you change the font to some other font, using roboto-Regular as the variable name would make no sense. You should use something like
$base-font: 'robotoregular';
$fallback-font: 'Arial';
font-family: $base-font, $fallback-font;
I'm using Compass/Susy for the first time. I'm having an issue when using the #include container mixin. It's automatically applying a clearfix to it. This is not desired. Is there a way to turn this off, or override it?
Yes, you can fork the source of susy and change this file:
https://github.com/ericam/susy/blob/master/sass/susy/_grid.scss
It looks like the pie-clearfix is applied in this mixin: #mixin apply-container
There might be a way to over-write mixins... Or just make another one that is similar to this one - and call that instead.
do You have any elegant approach to benefit from CSS3 features, like border radius or gradients?
I am looking for a solution that would avoid browser-specific CSS properties and browser-specific stylesheet files. I find them both hard to maintain and too verbose.
It could be a Javascript library that would take care of cross-browser compatibilit. Thus, I could use only W3C CSS3 properties support (not browser-specific) and get rid of the library when browsers will start tu support CSS3 well.
So far, I have found these resources that seem to fulfill at least some of my expectations:
eCSStender - JS that is told to imitate the CSS3 features on different browsers (even IE6), I haven't tested yet, however (read about eCSStender)
Mordernizr - JS that detects which CSS3 properties the browser supports
... I'll fiil it with your answers
Or maybe you have other approach that lets You take advantage of CSS3 without very verbose code?
You could use LESS, which has a border-radius example on their homepage:
.rounded_corners (#radius: 5px) {
-moz-border-radius: #radius;
-webkit-border-radius: #radius;
border-radius: #radius;
}
#header {
.rounded_corners;
}
However, I really don't find it that messy to use browser prefixes. For a border-radius, the only thing you need is this:
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
That will work in about a dozen browsers (if you include mobile browsers). Using indentation in this fashion also makes it easier not to forget to update one of the properties. When you decide do drop support for Safari 4 or whatever, you can simply search and replace the rules you want to remove from your CSS files.
Compare that to when we needed box model hacks, NS4, IE5/Mac fixes, and all of that crap.
This is not CSS3 specific, but as you are asking for a concise way to handle the styles and do mention modernizr (which works by adding classes like no-borderradius to your <html> element if that feature is not available), I thought it might be helpful for a generally improved way to organize your CSS.
There is LESS that allows the use of variables, mixins or nested rules in CSS (see the link for examples). This however requires you to compile your .less files into valid .css. To avoid this, there is/will be less.js (see also: Less.js Will Obsolete CSS) which enables you to include .less files directly in your page (useful at least during development).
I think LESS does not require you to learn a lot of new syntax rules and might help to organize fallback CSS right next to the "real" style.
Recent convert to RoR and I've been using Compass w/ Blueprint to dip into the proverbial pool. Compass has been fantastic, but I've come across something strange within the Typography library.
The blueprint-typography-body mixin contains the following:
=blueprint-typography-body($font-size: $blueprint-font-size)
line-height: 1.5
+normal-text
font-size: 100% * $font-size / 16px
My question revolves around "font-size." I'm a bit lost, as I would expect to pass in a font size and have that size reflected upon page load. However, in this scenario the formula seems to dictate a percentage against the default font.
ie:
+blueprint-typography-body(10px) //produces 7.5px off of the default font size of 12px from what I can tell.
In essence, I'm curious if there is a standard to setting font size within Compass other than explicitly declaring "font-size: 10px".
Note: The reason I'm leaning towards Blueprint/Compass font stylings is due to the standardization of line-heights, fonts and colors.
To be honest, the compass port of the blueprint typography is not fully configurable yet. So changing that default is probably not going to give you a proper font rhythm.
However, The next release of susy has a fully configurable vertical rhythm module that I helped build and it's pretty nice.
Susy
Vertical Rhythm Module
Just read in the discussion on Compass documentation (Julio Antúnez's comment) that you can adjust font sizes like this:
#import "compass/typography"
$base-font-size: 14px
$base-line-height: 21px
header h1
+adjust-font-size-to(18px)
Not sure this is recommended way but it works for me. I just started using Compass & Blueprint so above might cause problems elsewhere.