Sass Substract one file from another using SCSS

I have one common.scss that is shared across multiple projects. This file have few lines that should be removed for new project. Is it possible to create file with CSS options that will be substracted from common.scss?

Sass Interpolation of Mixin, Function, and Variable names

I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize @include and @extend, respectively. Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation? (Note: the OP's pe

Preferred way of writing vertical media queries with Sass' Breakpoint Extension

With the Sass extension Breakpoint, is there a preferred way to write vertical media queries that only have a single argument for the query value? Here's an example of what I'd like to ultimately accomplish: @media (max-height: 50em) { .item { font-size: 2em; } } Or, should I just do a plain, "on-the-fly" media query for these styles like such: .item { @media (max-height: 50em) { font-size: 2em; } } Is this something that could possibly be handled with a variable? My styl

Sass Sublime Text snippet doesn't work in .scss files

I have the following saved in ~/Library/Application Support/Sublime Text 3/Packages/User as sass_mq.sublime-snippet: <snippet> <content><![CDATA[ @include respond-min() {} ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>mq</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <scope>source.sass</scope> </snippet> I got sourc

Sass compass (scss) variables & media queries

I'm trying to do something like this: $arrow-size: 30px; @media only screen and (max-width: 449px) { $arrow-size: 15px; } div.selector { height: 0px; width: 0px; position: absolute; bottom: 0px; left: 50%; border-bottom: $arrow-size solid white; border-left: $arrow-size solid transparent; border-right: $arrow-size solid transparent; } Unfortunately, $arrow-size does not change according to the media query (my arrow is always 15px, even if my window is wider than 449px). A

sass px to em mixin / function for different base sizes on responsive site

I have been using sass for a while and for ages I have been using the following px to em function for my media queries: $browser-context: 16; // Default @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em } However, I am now wanting to set up a different base font size depending on width of screen. SO for instance for mobile sizes $browser-context: 14; // Default and for bigger screens: $browser-context: 16; // Default But Im not sure how to wrap this al

Sass SCSS behavior with negative margin

Let's take this SCSS code : $margin: 10px; .use_value { margin: 10px 0 0 10px; } .use_var { margin: $margin 0 0 $margin; } .use_negative_var { margin: -$margin 0 0 -$margin; } I expected .use_value, .use_var and .use_negative_var to be identic, but here's the result : .use_value { margin: 10px 0 0 10px; } .use_var { margin: 10px 0 0 10px; } .use_negative_var { margin: 10px 0 -10px; } Why is there a missing 0 in .use_negative_var ?

Sass SublimeLinter SCSS-Lint Not Linting?

With SublimeLiner debug set to on, I see this in the console that makes it appear the linter is loaded: SublimeLinter: scss activated: /Users/bob/.rvm/gems/ruby-2.0.0-p247@rails3/bin/scss-lint scss-lint is in fact in that directory. But I see this when a .scss file is edited: SublimeLinter: scss: _layout.scss ['/Users/bob/.rvm/gems/ruby-2.0.0-p247@rails3/bin/scss-lint'] SublimeLinter: scss output: /Users/bob/.rvm/rubies/ruby-2.0.0-p247/lib/ruby/site_ruby/2.0.0/rubygems/dependency.rb:296:i

Sass @import make me confuse

in compass or sass old version it can @import one times for every file like this _mixin.sass =test_mixin() color: #AAFFCB screen.scss @import "include/_mixin"; @import "print.scss"; header{ @include test_mixin; } print.scss header{ @include test_mixin; } output screen.css header { color: #aaffcb; } header { color: #aaffcb; } output print.css header { color: #aaffcb; } it should no have any error but in new version have error error sass/print.scss (Line 5: Undefined mix

Sass Avoid duplication for color schemes when it's only the value of a property that changes

I have elements throughout my application that can have one of three colors. Right now I put a class on each element .color1, .color2 or .color3. And then in the css declerations I do like the following (depending on element): .color1 .special_element {background-color: $color1;} .color2 .special_element {background-color: $color2;} .color3 .special_element {background-color: $color3;} The above pattern is repeated many times. Is there any way to make the code above more dense, e.g. with s

Sass does not compile compile right with more than one project accessing a foundation folder

I'm using CodeKit 2.1.8 I was using Foundation 5.4.6 but got in to some problems and updated to 4.5.7 now I still have some problems but different ones. I was using Sass version 3.4.7 but downgraded to 3.2.19 after reading this could help. This did not help so I updates back to 3.4.7. Right now my problem is as follows: I have foundation installed through CodeKit. I did not alter die bower component files, everything is as is. I have two projects accessing the bower component folder. My fo

Sass What do the ... mean in a SCSS mixin argument?

I'm looking at a gradients mixin created by someone else (Chris Eppstein). In the main mixin's argument list there are three dots after the last argument. @mixin linear-gradient($direction, $color-stops...){ What do they mean? I can't find it in the documentation mainly because ... is used in many code examples to show when they have skipped an irrelevant section. Thanks

Add SASS file watcher to phpStorm

I'm trying to add SASS support to phpStorm, but I can not find SASS or SCSS file watchers in Settings menu. All I can add as a new file watcher are listed below: Closure Compile CSSO CSS Optimizer Traceur compiler TypeScript UgliftJS YUI Compressor CSS YUI Compressor JS Should I install some updates to phpStorm or add some plugins?

libsass inspect, str_index

I have the following code that works well under sass 3.4.14 @function replaceAttribute($xml, $insert, $attribute) { @if type-of($insert) != string { $insert: inspect($insert); } $search_str: $attribute + '="'; //How much to add to get to where the string should be inserted $offset: str_length($search_str); $idx: 1; //The next attribute to replace in string $next: str_index($xml, $search_str); @while $next != null { $idx: $idx + $offset + $next - 1; //Remove old attribute value a

Underscore in partial Sass file

Is it necessary to have a .scss partial file start with an underscore? The documentation states that a partial should start with an underscore, because the file would otherwise compile to a CSS file. However I've noticed gulp-sass compiles files without an underscore into one complete CSS file just fine.

Sass in Angular 2 and webpack not working

I am acting according to sass-loader package: In my webconfig I have: { loaders: [ { test: /\.scss$/, loaders: ["style", "css", "sass"] } ] } In the module I import the scss like this: styles: require('./home.scss') , Scss file looks like this: $font-stack: Helvetica, sans-serif; $primary-color: #333; md-card { font: 100% $font-stack; color: $primary-color; } Unfortunately, when I run the app, the followin

gulp sass sourcemap pointing to wrong file

I try to use sourcemaps for my scss files. But when I inspect an element in the browser, the sourcemap points to a wrong file. I can't find what is causing this issue. gulp.task('sass', function(){ return gulp.src('./themes/custom/' + project + '/scss/style.scss') .pipe(sourcemaps.init()) .pipe(sass({ includePaths: [ bourbon, config.bowerDir + '/bootstrap-sass/assets/stylesheets', config.bowerDir + '/font-awesome/scss'

How to get 15 columns in Bootstrap 4 in SASS CSS?

I have a layout design clearly made for 1200px / 15 cols framework, but my client wants to use Bootstrap 4 with SASS only. Is it even possible to transform Bootstrap into 15 cols layout? I haven't seen such an example online. I'm not a huge fan of Bootstrap for small projects. It is a trend I honestly don't understand. Might be too heavy for a 5 pages website & projects are usually done according to the content, not according to some framework, Twitter-backed or not. But, this is it. If it

Sass Can I generate variables inside a mixin to use it outside, without !global?

I'm creating a theme system and want to reuse some vars depending on the scope, like: .black-friday { @include generate-theme('black', 'yellow'); } .light-theme { @include generate-theme('blue', 'pink'); } .dark-theme { @include generate-theme('black', 'orange'); } I don't want to declare a variable with !global since it would overwrite the previous var, and would not exist in a closed scope. I want to use it in a scope, so that I can change the theme easily with only one class

SASS remove unneeded class

I @import something from bootstrap-sass like @import 'bootstrap-sass/assets/stylesheets/bootstrap/buttons'; Then next I extend it to someother name to avoid conflicts when used on an existing web site. .my-cus-btn { @extend .btn } Question now is how can I remove the default .btn in order to avoid messup with existing website/css when used? Ps: to make it clear, I want the final CSS contains only .my-cus-btn but NO .btn, otherwise this style sheet will mess up legacy code. But I reall

Sass How do I make hover for my ".pic" class to get effected?

I want to add :hover this class ".pic". So it can contain more description on .pic:hover I use transform SASS, width, and height on .pic:hover that seems not working. I can't find out the problem. Please help to find out my question. Please watch it on my codepen for any details .pic width: 250px height: 250px //it doesn't get bigger when mouse is hovering over it .pic:hover width: 400px height: 400px

sass - Get attribute of selected element using scss

I'm trying extract the background images of similar buttons into a sass map like the following: $icons: ( users: '../../assets/files/images/admin/navicon_users_unselected@2x.png', cms: '../../assets/files/images/admin/navicon_content_unselected@2x.png', rules: '../../assets/files/images/admin/navicon_rules_unselected@2x.png', data: '../../assets/files/images/admin/navicon_data_unselected@2x.png,', setting: '../../assets/files/images/admin/navicon_settings_unselected@2x.png', logout:

Media selectors "extending" bootstrap SASS classes

On a site I'm developing w/ Bootstrap/SASS (SCSS) I'd like to have a Bootstrap button group (.btn-group) become a vertical group (.btn-group-vertical) using media selectors, rather than JavaScript. However, the well-known issues that @extend will not work inside a media selector, has left me befuddled. E.g., this raises an error: .navGroup { @extend .mt-1; @extend .btn-group; @include media-breakpoint-down(xs) { @extend .btn-group-vertical; } } If I were developing f

Sass Error using @include with scss

How do I get media queries to work in bootstrap? I have a SCSS file, I think I need to import something but I have no idea what. Error message: Scss compiler error: Error: no mixin named media-breakpoint-up Path: homepage.scss @include media-breakpoint-up(sm) { h1.home-page { font-size: 3rem; } }

Why I cannot assign my sass variables in my file system?

I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive: Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css Error: Undefined variable. background-color: $white ^^^^^^ sass/modules/_navbar.sass 3:21 @import sass/modules/_modules-dir.sass 1:9 @import sass/app.sass 3:9 root stylesheet Because I cannoStackOverflow files here on stackoverflow, I link my github reposito

Sass: How does background-position works in a hover effect with over sized background size

I am learning to use background-position property in combination with background-size property to create a cool effect. When you hove on an item, white band is animated moving from right to left. You can see the effect here: https://codepen.io/logan-lee/pen/YzPjLpj?editors=1100 I'm trying to understand how it works. Notice that inside &__link, background-size is set to 220%. And when it is hovered, background-position of it is set to 100%. <nav class="navigation__nav"> <ul clas

How does SASS know about a variable that is not defined?

I have this mixin: @mixin respond($breakpoint) { @if $breakpoint == phone { @media (max-width: 37.5em) { @content }; } } And this mixin is used like this: @include respond(phone) { font-size: 50%; } What I don't understand is how does SASS know what the variable phone is? What is being passed when you call @include respond(phone) and similarly what is being compared when this happens? @if $breakpoint == phone So what is phone? I don't see anywhere in the code that

Sass Scss modify rules based on topmost parent

Let's propose that we have the following scss code: .a { .b { .c { // rules here } } } This will output the following css: .a .b .c Now, if I would like to modify the ruleset of .c if .a gets another class, I would have to modify my scss like this: .a { .b { .c { // rules here } } &.d { .b { .c { // rules here } } } } If there are multiple modifications

Sass Scss accessing nested data

I'm trying to figure out how to access nested variables. I currently have something like the following: @mixin password-reset-modal-props { color: map-deep-get($modal-settings, 'password-reset', 'header', 'color'); font-size: map-deep-get($modal-settings, 'password-reset', 'header', 'font'); font-family: 'Helvetica Neue Bold'; } and accessed using: @include password-reset-modal-props I would like to use a nested variable so that I can group them together. I was thinking of someth

Sass Element:hover doesn't affect child

I'm coding a website for my learning path and I got following issue: When I Hover &__item, the animation property doesn't appears in style of &__selection... sass code: &__item { /*...*/ __selection{ /*...*/ } &:hover &__selection { animation: animSelect 800ms ease-in-out 0ms 1; } }

Sass Compass @import - Where is the base directory its looking?

trying to import a folder of sprites... also using Zend Framework so my setup is like the following: /config.rb http_path = "public/" css_dir = "public/css" sass_dir = "sass" images_dir = "public/media" javascripts_dir = "public/javascripts" /sass/blah.scss @import "imgim/*.gif"; /public/stylesheets/blah.css /public/media/imgim/1.gif 2.gif etc.gif So I'm calling the import for my list of images but it just doesn't like it. Tr

Sass Change CSS output filename in Compass

I am using Compass to compile .scss files to .css files. I have a file called app.scss which I want to compile to foundation.css. The problem is that I can't simply rename app.scss to foundation.scss because I end up with a circular import error (app.scss includes the following line: @import "foundation";). Is there a way for Compass to rename app.scss to foundation.css during the compiling. Thanks.

SASS - Cannot include sprites from inside Directives

I'm using SASS and Foundation 4. Since Foundation 4's nature is mobile first, I start by mobile styling first. So it's like this: @import "icons/*.png"; @include all-icons-sprites; // mobile styles .some-el { // some styles } @media only screen and (min-width: 48em) { .fb { @include icons-sprites(facebook); } } It's not working. If i call the .fb outside the media query directives, it works. I understand that you cannot extend global styles inside directives, but this is

Sass Nested grids with breakpoints

I want to use susy for two nested grids. One that defines the page layout (menu on the left, content on the right) and one inside content. Reason for that is that the content is created by a CMS where different templates can be used and I'd like to have the scss code together with the template. Using a fluid grid seems to solve exactly that problem: <div class="page"> <div class="menu"> <ul><li>foo</li><li>bar</li></ul> </div&g

sass with grunt is not working

I have been trying to setup a grunt task to compile my sass files but nothing seems to be working. My working structure is Gruntfile.js package.json assets | |--sass | | | styles.scss | |--css and this is my grunt file 'use strict'; module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { options: { style: 'expanded' }, files: [{ expand: true, cwd: 'assets/sass

Compass/SASS - not all files are compiled

I don't know if I can explain the issue without pasting the whole code of all files but I'll try. EDIT I've added the whole code to Github Account - My Sass structure I use Windows 8.1 and Compass 0.12.6 In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes). I run co

Sass Michael Hartl Stylesheet custon.css.scss depreciated elements

I am on chapter 8 but the listed custom.css.scss contains elements, which are no longer current and/or HTML classes, which are now depreciated in Bootstrap. Sample App provided custom.css.scss @import "bootstrap"; /* mixins, variables, etc. */ $grayMediumLight: #eaeaea; @mixin box_sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -box-sizing: border-box; } /* universal */ html { overflow-y: scroll; } body { padding-top: 60px; } section { overflow: auto;

Sass Interpolation of Mixin, Function, and Variable names

I'm trying to loop through a list of values in Sass and use interpolation of the current key to dynamically output class names that utilize @include and @extend, respectively. Here is a pen showing the problem, simplified. http://codepen.io/ghepting/pen/vBmLy As you can see in the markup, I have tried including the "_" inside of the interpolated string as well as outside of it. Is there something I'm missing to work around this limitation of how Sass supports interpolation? (Note: the OP's pe

Sass Compass Vertical Rythm For Non Text Elements

In these days I jumped into compass and i can say I really love it. By the way, I come up with some questions about a proper workflow that fits my needs. Let's have an example: my grid example As you can see i setup a pretty straightforward grid (5px since the whole vertical rhythm is based on a 25px baseline grid). I would like to know in which way i can fit non text elements ( as containers and images ) to the baseline taking advantage of built in compass mixins ? Thanks in advance.

Can't build SASS in Sublime Text 2

I followed everything here: SASS won't build in Sublime Text 2 [Errno 2] No such File or Directory I tried symlink and also changing the path code in the SASS.sublime-build file to point to my sass install like this: { "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no- cache"], "selector": "source.sass, source.scss", "line_regex": "Line ([0-9]+):", "osx": { "path": "/Users/Andrew/.rvm/gems/ruby-2.1.1/bin/sass" }, "windows": { "shel

Sass How to calculate with SCSS variables from function

I have a function which converts px to rem. For example: height: rem-calc(14px); // makes height: 1rem; Now I would like to calculate with it from variables. For example: $switch-track-width: rem-calc(50px); $switch-thumb-size: $switch-track-width / 2; // making it 25px or 1.7857rem in this case That doesn't work so I tried something else: $switch-thumb-size: ($switch-track-width / 2) + 0rem; $switch-thumb-size: (#{$switch-track-width} / 2) + 0rem; Both $switch-thumb-size examples aren'

Edge can't see .SCSS file (ie. Sass)

I am running Sass off localhost during development. While Chrome is fine, Edge is reporting: The server has not found anything matching the requested URI (Uniform Resource Identifier): (XHR)GET - http://localhost/website/css/style.scss It doesn't prevent the CSS from rendering, but it's a console error I'd rather avoid. For what it's worth, the last line in my generated CSS (style.css) is: /*# sourceMappingURL=style.css.map */

Sass How to add outer gutter to Bourbon Neat's outer-container?

On widths smaller than $max-width, the grid starts from the edge of the viewport. I added some padding to avoid the text from starting from the edge of the viewport, but now it's out of alignment with the grid. How can I make the grid start from the content edge rather than the viewport please?

Sass How to convert less mixin to scss?

I only just starting to learn both less and sass and can't figure out how to convert this less mixin to scss. This one compiles just fine and provides proper values in a compiled .css file: .button-styles(@type) { &--@{type} { border-color: @@type; a:hover { background: @@type; color: #FFF; } } } I tried using different converters. This doesn't work, for example: @mixin button-styles($type){ &--${type} { border-colo

gulp-sass is not installed

I turn into my project and enter: npm i --save-dev gulp gulp-sass Then I enter the team: gulp an error occurs It is the installation progress before. installation logs here

Sass: rgba function is not working as per documentation

I have two examples that I'm trying to solve: Example 1 $test: #101E41 body --colors-dim: rgba(#{$test}, 0.64) Output: rgba(#101E41, 0.64) Example 2 body --colors-active: #101E41 --colors-dim: rgba(var(--colors-active), 0.64) Output: rgba(var(--colors-active), 0.64) Both of these look like are examples that should be valid as shown here: https://sass-lang.com/documentation/modules#rgb Is there something I'm missing?

Sass SAASCould not resolve the variable "$breadpoint" within "if $breadpoint == tablet"

I am new in Sass. I am following one Youtube tutorial for learning Sass. I used exactly the same syntax which he used on his tutorial but i am getting sass error: SAASCould not resolve the variable "$breadpoint" within "if $breadpoint == tablet". @mixin responsive($breadpoint) { @if $breadpoint == phone { @media only screen and (max-width:700px){ @content; } } @else if $breadpoint == tablet { @media only screen and (max-width:1060px){ @content; } } @else if

Sass Use scss on vue Single file component without cli or webpack

I'm developing a PHP based system where I cannot use webpack, NPM or the Vue CLI, my page has several components that are loaded on real-time using httpVueLoader, one example of such component is as follows <template> <section class="Header-Top topHeader_mobile" id="header"> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-12"> <div class="HeadRight-Phone&quo

  1    2   3   4   5   6  ... 下一页 最后一页 共 15 页