I understand that using different CSS compression shouldn't really have any effect on the site outcome (except smaller file size) but my site breaks completely when I set Compass to spit out compressed CSS.
I'm not sure what it is that breaks, but I believe it's Susy that collides with some other Compass function like the sprite or base64 inline image functions.
In order to not paste too much code in this question, here are two links to demonstrate (same source, generated seconds apart)
Using output_style = :expanded in config.rb (everything works):
http://davidpaulsson.se/expanded/
Using output_style = :compressed in config.rb (layout breaks):
http://davidpaulsson.se/compressed/
I'm using Jekyll to generate the static files, and the source files are available on Github: https://github.com/davidpaulsson/davidpaulsson.se/tree/master/sass
The problem is with this piece of code (_general.scss, line 208):
#media screen and (max-width: 769px) {
-webkit-text-size-adjust:none;
}
Here you have a CSS declaration without a selector, which is invalid.
SASS should've produced an error. Maybe it failed to do so because of the #media wrapper which kinda looks like a selector.
I'm not sure what this CSS property does, try applying it to html or *:
#media screen and (max-width: 769px) {
html {
-webkit-text-size-adjust:none;
}
}
Related
My website has a Slick-Slider which is not full screen at this moment. I want to do it full screen. So when I inspect the website I can see this code;
#media (min-width: 768px) .col-md-9 {flex: 0 0 75%;max-width: 75%;}
This code comes from Global.css which I dont have it in my theme folders.
When I change max-width to 100% on inspect slider becomes full screen when I paste this code to my css file nothing happens. How can I mport this code to my CSS?
Thanks.
Just include it normally in your CSS. Local CSS takes precedence over global CSS settings. IF you are able to, make sure that your CSS document is included after the global one.
I'm trying to import some classes from a CSS file like bootstrap.css to my site.scss SASS file, not all of them. The problem with following code is that I get all bootstrap classes in my compiled site.css file:
site.scss
#import "bootstrap";
.my-div-md-6
{
/*some other styles*/
#extend .col-md-6;
}
On the other hand, It is possible to do this with LESS by importing bootstrap.css as reference using this code:
site.less
#import (less, reference) "bootstrap.css";
.my-div-md-6{
/*some other styles*/
&:extend(.col-md-6);
}
The compiled output of LESS is very light as below:
site.css
.my-div-md-6 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 992px) {
.my-div-md-6 {
float: left;
}
.my-div-md-6 {
width: 50%;
}
}
.my-div-md-6 {
/*some other styles*/
}
Is it possible to achieve this with SASS? If yes, giving a quick example would help.
Unfortunately, there is not simple answer and at the time of writing this, Ruby Sass does not natively support the LESS import (reference) feature.
TLDR; Suggestions:
use uncss or postcss to remove the compiled css from file before finalising stylesheet.
if you can, use mixins and placeholder classes as a rewrite of the scss file, but this is the MOST time consuming.
import "file" as partial such that file="_file.scss" and #extend .class if you absolutely have to, (manual method but suppose it'll work)
UNCSS
You can use uncss as a package from npm to remove the compiled css (I know this isn't efficient, but if you had to use SASS), then you'd remove the chaff that's generated from the example bootstrap import.
HOW?
QUOTE: SO-Answer-Joesph
How? The process by which UnCSS removes the unused rules is as follows:
The HTML files are loaded by PhantomJS and JavaScript is executed.
Used stylesheets are extracted from the resulting HTML.
The stylesheets are concatenated and the rules are parsed by css-parse.
document.querySelector filters out selectors that are not found in the HTML files.
The remaining rules are converted back to CSS.
So yes, it removes selectors not in the DOM at runtime. If you have dynamically added selectors, you can make uncss ignore them by commenting: /* uncss:ignore */ before them, e.g...
MAKE SURE YOU ADD THE MEDIA OPTION IN UNCSS
REF: SO-Answer-Deksden
SASS Background research:
Summarising above:
nex3: one of the core leads for sass, has been at google and working on dart. They released dart-sass (unstable release) as a rewrite in favour to replace and improve upon ruby sass. This is interesting as this rewrite also explains the lack of feature development in Ruby Sass as well as the need for a rewrite. Since a core contributor of a ruby sass port: i.e. libsass (C++ implementation of ruby-sass) left the libsass team, it brings a further impetus to improve on sass performance.
Credit:
Joesph
Deksden
bootstrap.css contains:
#media (min-width:992px)
I would like to change the 992px to 650px. How do I do it by overriding it from another file and prevent the 992px line in the original bootstrap.cs file from taking effect?
In other words, I want all width of >650px to adopt my style, and I would like to do it without modifying the original bootstrap.cs file.
I don't see a way that you can do that.
I would suggest generating your own bootstrap CSS file. You can easily modify the media query breakpoints by going here:
http://getbootstrap.com/customize/#media-queries-breakpoints
Change the values to your prefered dimensions.
Scroll down to the bottom of the page and click "compile and download".
Ideally if you include your CSS file after the default bootstrap.css file, the styles that are rendered will be from your file. You will have to note that all the styles in the bootstrap.css that you do not want to reflect will have to be overwritten in your custom CSS file.
This is a only option there is if you do not want to modify the bootstrap.css file.
Hope this helps.
Create your own CSS file and put the styles there. #media (min-width: 650px) { .......}
If the styles don't take effect, use !important for the styles.
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
I tried to use breakpoint to replace a media query in _responsive.scss (see line 155) of a subtheme of the Zen 7.5.4 Drupal base theme:
// #media all and (min-width: 960px)
#include breakpoint($desktop)
{
$zen-column-count: 5;
…
Before that I installed breakpoint, required in config.rb, included and defined my breakpoints in _init.scss.
// Breakpoints
$breakpoint-no-query-fallbacks: true;
$small: 480px, 'no-query' '.lt-ie9';
$desktop: 960px, 'no-query' '.lt-ie9';
A simpler task works flawlessly (so the system works) however the mentioned code creates the following error:
error styles.scss (Line 118 of _breakpoint.scss: Base-level rules cannot contain the parent-selector-referencing character '&'.)
I tried to find the '&' in the code of zen-grids, but I did not find it. What do I wrong?
As Thamas said, Breakpoint's no-query fallback is meant to be used from within a selector; the fallbacks get prepended to the selector string with a space, so they cannot be used outside of a selector.
This is what's going on:
Sass with Breakpoint:
$small: 480px, 'no-query' '.lt-ie9';
.foo {
content: 'bar';
#include breakpoint($small) {
content: 'baz';
}
}
Plain Sass:
.foo {
content: 'bar';
#media (min-width: 480px) {
content: 'baz';
}
.lt-ie9 & {
content: 'baz';
}
}
It is important to note that Breakpoint does not create a separated global context, so the code you've provided that sets $zen-column-count inside of your Breakpoint include will not restrict that to that breakpoint.
The recommended workflow for working with media queries, and the workflow Breakpoint was built for, was not one where all media queries of one type are grouped together, but rather one where media queries are used in-line to adjust individual elements as they are needed. This goes hand-in-hand with the recommendation that you do not use device based media queriers, but rather media queries that are content based; i.e. media queries chosen because the current component no longer looks good and needs to be adjusted.
"What do I wrong?"
I did not read. The error message says that the problem is in _breakpoint.scss which belongs to Breakpoint and not to Zen.
And it is not a bug, it is "by desing". Breakpoint is a mixin which is designed to be included in a selector, so it is meaningless to #include at the root level of an .scss file.
It worth to mention that Sass enables root level #include but it is restricted to use without any properties or parent references (breakpoint have these, that was the problem) – see: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#including_a_mixin