I'm using Compass in my CSS and I am trying to specify part of my Sass Css to be run only in Chrome. I tried #include with-prefix but it dosen't seem to work. Is there anyway to run these specific animations only for specific browsers, in this case chrome?
#include with-prefix(-webkit) {
.slideFromRight {
&.ng-enter {
#include animation(slideFromRight ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
&.ng-leave {
position: fixed;
#include animation(slideToLeft ease $animationSpeed);
#include animation-iteration-count(1);
#include transform-origin(0 0);
#include animation-fill-mode(forwards);
}
}
}
Related
#import "../../../styles/media-queries";
#mixin mobile-width {
#include mobile {
width: 100%;
}
}
#mixin desktop-width {
#include desktop {
width: 464px;
}
#include tablet {
width: 464px;
}
}
#mixin desktop-tablet-properties {
#include desktop {
#content;
}
#include tablet {
#content;
}
}
#mixin mobile-properties {
#include mobile {
#content;
}
}
.main-container {
position: absolute;
box-sizing: border-box;
width: 100vw !important;
// #include desktop-tablet-properties {
// top: 165px;
// }
#include desktop-tablet-properties {
}
}
Hello Everyone, I am getting weird "Error: Transform failed with 1 error: ERROR: Unterminated string token" while trying to use mixin with #include in my Scss.
When I comment <#include> mixin statement the app Builds perfectly.
I tried this with fresh angular non-production environment It works.
Also, I tried with adding stylePreprocessorOptions in my server Json(in angular.json) as suggested in one of the post but to no avail.
Can someone Help?
Thanks
You might need to share with us your #mixin mobile to better debug the problem. Mixins usually require params to work, so take a look at your original mixin.
Also, I would recommend using #use "../../../styles/media-queries" as *;
rather than #import.
Chome:
Safari:
My compass .scss code
#include icon-font('SSStandard', inline-font-files('ssstandard/ss-standard.woff', woff, 'ssstandard/ss-standard.ttf', truetype,'ssstandard/ss-standard.svg', svg),'ssstandard/ss-standard.eot');
// Custom code goes here..
#include icon-font('SSSocialRegular', inline-font-files('ssstandard-social/ss-social-regular.woff',woff, 'ssstandard-social/ss-social-regular.ttf', truetype,'ssstandard-social/ss-social-regular.svg', svg),'ssstandard/ss-social-regular.eot');
// Examples of using the icon mixin:
// #include icon('user');
#include font-face("Montserrat", inline-font-files("montserrat/Montserrat-Regular.ttf",truetype, "montserrat/Montserrat-Regular.woff", woff));
#mixin ss-icon($name, $symbol,$font:"SSStandard") {
.x-tab .x-button-icon.#{$name}:before,.x-button .x-button-icon.#{$name}:before{
position:absolute;
top:1px;
right:0;
bottom:0;
left:0;
text-align:center;
text-rendering: optimizeLegibility;
font-family:$font;
}
.#{$name}:before{
font-family:$font;
font-size: 120%;
text-rendering: optimizeLegibility;
}
}
#include ss-icon('ss-write', '✎');
#include ss-icon('ss-writingdisabled', '');
#include ss-icon('ss-navigate-right', '▻');
#include ss-icon('ss-navigate-left', '◅');
#include ss-icon('ss-facebook','','SSSocialRegular');
#include ss-icon('ss-twitter','','SSSocialRegular');
#include ss-icon('ss-mail','✉','SSSocialRegular');
#include ss-icon('ss-info','ℹ');
#include ss-icon('ss-home','⌂');
#include ss-icon('ss-settings','⚙');
#include ss-icon('ss-sync','');
Both SS standard and ss social regular do not display properly, but Montserrat does.
The home symbol displays as "Γîé" on safari and if I replace that content on the inspector with the correct symbol, it displays correctly.
The charset is "UTF-8" on both my scss file and the html file
I am trying to make a nav bar with sass and foundation grid. I have links in the nav bar, but I don't want them to each be #include grid-column(4); instead I would like them to be 3 columns each and then have an empty space of 3 columns on the right end. It would be something similar to this:
(the email tab is currently hovered)
How do I add a space there with the Foundation Grid Sass Mixins.
I fixed the issue by just changing each id to #include grid-column(3); that were previously #include grid-column(4);. I believe this worked because they are in a row and the next column down is larger than 3 so it doesn't automatically jump to the nav bar above, but it lays underneath it.
My mixins are laid out something like this:
header {
#include grid-row;
}
h1 {
#include grid-column(9);
}
.login{
#include grid-column(3);
}
nav {
#include grid-column(12);
}
#games {
#include grid-column(3);
}
#email {
#include grid-column(3);
}
#archive {
#include grid-column(3);
}
.breadcrumbs {
#include grid-column(12);
}
nav a {
}
Question
Why is the bootstrap-sass makeColumn(X) mixin not behaving the same as the Bootstrap .spanX class? For example, a class using makeColumn(9) does not look the same as the same div using a .span9 class.
Context
I'm building an application using Ruby on Rails and having major problems trying to use the mixins in the bootstrap-sass gem.
When I use the classes I've defined I don't get the same styling as if I were to just use the .span class in Bootstrap. I've looked all over the Internet and can't figure out what's wrong. I'm guessing it's something fairly obvious that I'm just not seeing because I've been staring at a screen for too long.
HTML
<div class="content">
<div class="main">...</div>
<div class="sidebar">...</div>
</div>
scss file
#import "bootstrap";
body {
.main-content {
#extend .container;
}
.content {
#include makeRow();
}
.content .main {
#include makeColumn(9);
}
.content .sidebar {
#include makeColumn(3);
}
.feature {
#include makeColumn(4);
}
padding-top: 60px;
}
footer {
#extend .container;
}
#import "bootstrap-responsive";
Thanks for the help.
I'm not sure what SASS Adaptation you're using but in the one I'm using (https://github.com/anjlab/bootstrap-rails), there isn't a lot of documentation and the format changes.
Instead of #include makeRow(); you have to use:
#include make-row();
Instead of #include makeColumn(3); you have to use:
#include make-column(3);
more documentation can be found here: https://github.com/anjlab/bootstrap-rails/blob/master/app/assets/stylesheets/twitter/bootstrap/_mixins.scss
From the Susy docs: http://susy.oddbird.net/guides/reference/#ref-grid-background
SUSY GRID BACKGROUND
Show the Susy Grid as a background-image on any container.
// susy-grid-background();
.page { #include susy-grid-background; }
If you are using the element as your Container, you need to apply a background to the element in order for this grid-background to size properly.
Snippets of my css:
$total-cols : 16;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
html { background: #fff no-repeat left top; }
.standard {
#include container;
#include susy-grid-background; /* Susy */
and in my Haml:
%body.standard
Whatever I've tried the grid always shows 12 columns. Would anyone be kind enough as to point me in the direction I need to go to get this debug tool to work?
susy (1.0.rc.1)
compass (0.13.alpha.0)
If you have some breakpoints, you also need to address these directly in order to change the number of columns $susy-grid-background shows:
.page {
#include container ($total-columns, $break1, $break2);
#include susy-grid-background;
#include at-breakpoint($break1) {
#include susy-grid-background;
}
#include at-breakpoint($break2) {
#include susy-grid-background;
}
}
$total-cols should be called $total-columns. The name of that variable changed in 1.0. The default setting is 12 columns, and you are not actually overriding that anywhere.