import,sass,bower,susy , Sass importing bower components


Sass importing bower components

Question:

Tag: import,sass,bower,susy

I have moved over from COMPASS to Libsass, the speeds are great but I need to use a few bower components to get this working.

It may be a bit pedantic but I have to import my components like this at the top of my scss file.

   @import "../bower_components/compass-mixins/lib/compass";
   @import "../bower_components/susy/sass/susy";

It's ugly, is there a way to either import them via grunt or alias the files so I could do

 @import "compass";
 @import "susy";

Answer:

To manage your dependencies, you can use Grunt Wiredep (https://github.com/stephenplusplus/grunt-wiredep) to automatically add the files in your main.scss file.

Add the main.scss to your wiredep config.

wiredep: {

  task: {    

    src: [
      'app/styles/main.scss',  // .scss & .sass support...
    ]
  }
}

And pop this in your main.scss file.

// bower:scss
// endbower

Hope that helps you!


Related:


How to make :hover more mobile friendly and accessible? [closed]


css,user-interface,mobile,sass,user-experience
I'm using SCSS to make a dropdown menu. Here is an excerpt of how it works: li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: $menuBG; color: $menuColor; cursor: pointer; transition: all 0.2s; &:hover { background: $hoverBG; color: $hoverColor; } Now what I'd...

“Cannot resolve symbol baoyz” Android Studio using baoyongzhang's SwipeMenuListView


android,git,import
I've recently downloaded the github repo: https://github.com/baoyongzhang/SwipeMenuListView Which allows to be a SwipeMenuListView. But the "baoyz" in the following import methods is red: import com.boayz.swipemenulistview.SwipeMenu; import com.baoyz.swipemenulistview.SwipeMenuCreator; import com.baoyz.swipemenulistview.SwipeMenuItem; import com.baoyz.swipemenulistview.SwipeMenuLayout; import com.baoyz.swipemenulistview.SwipeMenuListView; import com.baoyz.swipemenulistview.SwipeMenuListView.OnMenuItemClickListener; import...

Rendering a dynamically generated background based on width


html,css,ruby-on-rails,sass,haml
So I have a background image attribute (as a string referencing an image in the project), that belongs to a Badge table. I'm rendering each background image based on the current path. But I want to render different images at two different max-widths. For example, .badge-headline-background{style: "background-image:url(../assets/header-graphics/#{@badge.background})"} renders a background...

R Importing excel file directly from web


r,excel,import,website
I need to import excel file directly from NYSE website. The spreadsheet url is https://quotespeed.morningstar.com/exportChartDataToExcel.jsp?tickers=AAPL&symbols=126.1.AAPL&st=1980-12-1&ed=2015-6-8&f=m&dty=1&types=1&ver=1.6.0&qs_wsid=E43474CC03753FE0E777D89877788ECB . Tried using gdata package and changing https to http but still doesnt work. Does anybody know solution to such issue? EDIT: Has to be imported to R directly from website (project requirement)...

sass file not compiled by gulp


css,node.js,sass,npm,gulp
I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile....

Can I override a scss style in Prestashop?


css,sass,prestashop
I'm using a default theme in Prestashop 1.6 and I have a problem. What I'm trying to accomplish is to simply move the navbar 25px higher. I know that I need to remove or change #block_top_menu { padding-top: 25px; } in blocktopmenu.scss, which is located not in the modules directory,...

Changing one property in a Sass variable with multiple properties


sass
I have a Sass variable $box-shadow containing the value 10px 10px 1px 0 rgba(0,0,0,.3); I would like to define another variable $box-shadow-alt in which the h-shadow property (the first 10px in this case) should be an inverse of that in the original variable. Is there a Sassy way of changing...

Trouble remembering import rules in Python


python,import,attributeerror
It's been a while since I have used Python and am stumbling already at a simple import! statements.py: str = "hello" main.py: import statements print statements.str Obviously the final program will have more going on, and the statements will be stuff like URLs. For this simple example however with both...

flask-assets - sass don't resolve relative path in @import scss directive


python,flask,sass,flask-assets
i have flask application with buildout environment ./bin/pip show flask | grep Version Version: 0.10.1 ./bin/pip show flask-assets | grep Version Version: 0.10 in src folder src/setup.py have following strings setup( name = 'spf', install_requires = [ 'flask', 'flask-assets', ], entry_points = { 'console_scripts': [ 'spf_dev = spf.manage:dev', /* see...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]


css,css3,sass,compass
This question already has an answer here: Compass wont generate cause an “invisible” error 1 answer When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector,...

Cannot resolve method 'add(int, com.example.utkarsh.beatle.app.MainActivity.PlaceholderFragment)


android,android-fragments,import
package com.example.utkarsh.beatle.app; import android.app.Fragment; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ListView; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class MainActivity extends FragmentActivity { @Override public void onCreate(Bundle...

Meteor: Load scss files in a certain order


meteor,sass
I'd like to know how to load scss files in order when using Meteor. Not using Meteor, I would make something like application.scss and load .scss files in order so that stylesheets loaded later can depend on mixins/variables loaded earlier. And then I'd load application.scss in my template. application.scss @import...

How to center align Zurb Foundation block grid elements that are being pushed to the next row?


html,sass,zurb-foundation
I'm using the block grid from the Zurb Foundation framework but I'm having some issues getting it to align the way I want to. I have it set so that it displays 4 blocks per row. I have more than 4 blocks so the ones that don't fit are pushed...

Flask app structure is giving me module headaches


python,import,flask
I'm a newcomer to Python and Flask so I may be completely off with my app's organization. Here's what the directory structure looks like: + venv + bin + include + lib + myapp - __init__.py + config - __init__.py - development.py - production.py + templates - layout.html (more html...

Sass loader not working in webpack


node.js,sass,webpack
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command: ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss Module build failed: TypeError: Cannot read property 'sections' of null at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) at PreviousMap.consumer...

gulp concat after sass


sass,gulp,concat,gulp-concat
I would like to take the sass output and concat it to another css regular file. example: animate.css app.scss return gulp.src('app.scss') .pipe(sass({ errLogToConsole: true })) .pipe(concat(['animate.css', OUTPUT_OF_THE_SASS_ABOVE])) .pipe(gulp.dest(paths.public+'css/')) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('css/')) .on('end', done); any ideas how to do it? ******* IDEA maybe is it possible to generate the...

Yeoman - Gruntfile.js generates source map at build but deletes it after any changes


sass,gruntjs,yeoman,yeoman-generator,gruntfile
I installed Yeoman with angular generator, and it created Gruntfile.js. The problem is that after launching the webserver in the terminal with: grunt serve Yeoman generates main.css with in the end the reference of the source map /*# sourceMappingURL=main.css.map */ But after changing any scss the watch routine regenerates it...

IMPORTXML table with alternating rows


excel,import
I would like to use the Google Sheet IMPORTXML function to import only the '1B' column from this Fangraphs page. I am able to use this function... =importxml("http://www.fangraphs.com/statsd.aspx?playerid=9166&position=C&type=1&gds=&gde=&season=2015", "//tr[@class='rgRow']/td[10]") to import EVERY OTHER row in the table, because the table is split into two classes of 'rgRow' and 'rgAltRow.' However,...

pgAdmin3 not see database postgresql


database,postgresql,import,pgadmin
I created DB with name "food" in command line in Linux Mint. I would like import dump to db, but I cant did it. My pgAdmin didn't see this db. I try update list of db in pgAdmin, try reinstall pgAdmin, restart server. I cant import dump to db in...

SASS conditional for global override


sass
I am trying to implement an idea where I can individually set a bottom border for heading tags (h1,h2,h3,h4), but also have a global override switch. Something like this: $h1-border: 4px solid #CCCCCC; $h2-border: 4px solid #CCCCCC; $h3-border: 4px solid #CCCCCC; $h4-border: 4px solid #CCCCCC; ...but if I set something...

API Manager: Set API icon in Swagger 2.0 definition?


import,swagger,bluemix,swagger-2.0
Is it possible to define an API icon in the Swagger 2.0 definition that will be shown on the app developers page? Or is it at least possible to set an API icon in the API Manager UI? I could not find anything related. ...

SASS and Bootstrap - mixins vs. @extends


css,twitter-bootstrap,sass
I'm using the SASS port of Bootstrap, and I'm wondering if there's any difference between using the pre-defined mixins and using SASS's @extends. For instance, if I have <div class="wrapper"> Some content here.... </div> is there any difference between doing .wrapper { @include make-row(); } and .wrapper { @extends .row;...

How to solve JDBC - MySQL I occured? [duplicate]


java,android,mysql,jdbc,import
This question already has an answer here: What is a Null Pointer Exception, and how do I fix it? 12 answers When I run the emulator, it woks perfectly with no errors, but when I press the Login button, I get an error. This is my code: public class...

Importing data from access to excel using vba


excel,vba,ms-access,import
I am trying to import data from the table "memory" in my access database called "Computer.accdb", which is located on the desktop to Excel. I was able to find a code online and it was able to run but it did not work properly. I added a reference to the...

Being able to print before declaring. PYTHON


python,import
It's quite straight forward, and I bet it's a noob question. Why is it that the following can print the year BEFORE declaring it, as it is shown in the code from datetime import datetime now = datetime.now() print now.year current_year = now.year current_month = now.month current_day = now.day This...

Package does not exist when compiling


java,linux,import,apache-commons
I´ve made a Java Project on Windows and now I want to use it under Linux. Since I am working with Files, I "need" the org.apache.commons.io.FilenameUtils package. Under Windows I am working with IntelliJ, so it manages everything for me. I am sharing the Directory of the Project via VirtualBox...

Python Relative Imports Only Work With Django


python,import
Hi I use Django frequently and am constantly using relative imports along the lines of from .models import XXX for XXX in a models folder or from . import views for a file named views.py in same directory and it works fine there. But when I create my own Python...

Run Magento 1.9.1.0 Dataflow Import Profile Programmatically


php,xml,magento,import,dataflow
I've tried to get this working, but it can't seem to find a solution. I'm looking to run an existing dataflow profile which has an ID = 3, and has the import file name already configured. All the research I've done, leads to some variation of the following code: public...

Custom grid in foundation?


sass,zurb-foundation,zurb-foundation-5
I need a different sized grid within the standard grid layout. I'm using sass and have tried: .row-30{ @include grid-row($total-columns: 30); } Here's the HTML: <div class="row-30"> <div class="small-5 columns">a 5 col</div> <div class="small-1 columns end">a 1 col</div> </div> I'm having no luck though. Where am I going wrong with...

Compiling SASS files using Grunt creates an unnecessary folder


javascript,css,sass,gruntjs
So I have been trying to create my first compiled css files using grunt and sass, and i am having a problem that I cant figure it out. Every time that I run the sass task, an unnecessary "sass" folder is created inside of my css folder: This is how...

Strange SASS output when using extends


css,sass
I have the following SASS files _android.scss: $width: 111px; @import 'child'; .android .child { @extend %child; } _ios.scss: $width: 999px; @import 'child'; .ios .child { @extend %child; } _child.scss: %child { width: $width; } app.scss: @import 'ios'; @import 'android'; Now when I run sass I get: $> sass app.scss .ios...

Connect to database and export to sql script


java,database,import,export
I am looking for some way to connect to a MySQL database and export the structure and data into an SQL script that I could run again to import the data. I am trying to do this using Java but have had no luck finding anything other than hibernates SchemaExport...

@font-face mixin for Scout App


css,sass
I am new to sass. I am using Scout App to compile my scss. I have seen several mixin examples for @font-face using Compass or other compilers like the example below: @include font-face("PacificoRegular", font-files("pacifico/Pacifico-webfont.woff", "pacifico/Pacifico-webfont.ttf", "pacifico/Pacifico-webfont.svg"), "pacifico/Pacifico-webfont.eot"); I have never seen any example for how to use @font-face mixin for...

Importing .kit file (variables) into .kit file (css)


css,variables,import,codekit
I'm using a .kit file to hold variables to make it easy to change up as a template. Importing the .kit file into my index.html file has no issues, but in order for the variables to also work in my css file, I have to import it there as well...

sass-rails depends on sass v3.2, I need sass v3.4. What is sass-rails' “gemfiles” directory for, and will it help me use sass v3.4?


ruby-on-rails,ruby,sass,gemfile
I have a project that requires sass v3.4, but sass-rails currently has this in its sass-rails.gemspec: s.add_dependency 'sass', '~> 3.2.0' The latest version (master branch) has gone backwards even more: s.add_dependency 'sass', '~> 3.1' From github, I can see that sass-rails works with sass v3.4 and has testing for it....

Android Studio: How can I add an image in the drawable/res folder?


android-studio,import,jpeg
I tried to copy and paste .jpg file to the drawable folder but i got this errors: E:\Projects\QuizApp\MyApplication\app\build\generated\source\r\debug\com\example\androbo\quizapp\R.java Error:(1452, 32) error: <identifier> expected Error:(1452, 37) error: illegal start of type Error:(1452, 38) error: <identifier> expected Error:(1453, 32) error: <identifier> expected Error:(1453, 40) error: <identifier> expected Error:(1454, 32) error: <identifier> expected...

from x(defined in program) import y(defined in program) python


python,python-2.7,import,filenames
I need some assitance since I really have no idea how I can fix this: x="test" y="test2" When I try to import y from x , it says that there is no file with the name "x" (from x import y) Is there any way to import test2 from test...

Importing with package name breaking enum comparison in Python


python,import,enums,package
My friend and I are making chess AIs in Python, but we're running into a mysterious problem with enums. We encode the piece types in an enum like so: Piece.py: from enum import Enum class PieceType(Enum): type_one = 1 ... def recognise_type(my_type): print("Passed ", my_type) if my_type is PieceType.type_one: print("Type...

How to import directory of .scala files in sbt (unmanaged)?


scala,import,dependencies,sbt
I have a directory that I want to use as a dependancy for an sbt project however its comprised of .scala files which means I can't place it inside a jar (from what I understand) so then how can I use it as a dependancy for my project? (sbt doesn't...

Python Searching for files and Importing them


python,import
I need to write a function that walks through directories searching for files that end in _prj.py, and then extract some lists from there. The way I'm doing it right now is by using os.path.walk and then importing. My code looks like this: for py_file in files: if py_file.endswith("_prj.py"): print...

read Excel cells into Stata global as variables


excel,variables,import,stata
There are several panel datasets I'd like to join. The observations in these datasets are identified by an id variable and a variable identifying the time the observation was made. All datasets include some variables I need, some I don't need and never the same variables (excluding the id and...

Java import static method but not field


java,import,static
Take the following class for example: public final class ClassName { public static final void TEST() {} public static final Object TEST; } Now, from another file, I want to import static ClassName.TEST(), but not ClassName.TEST. How would I go about importing a method but not an identically named field,...

Simplifying sass attribute selectors


css,sass,mixins
I'm trying to come up with a way to simplify some SCSS attribute selectors. What I end up with is: [data-attr="opt1"] { ... } [data-attr="opt2"] { ... } [data-attr="opt3"] { ... } What I'm hoping for is to be able to write something closer to: [data-attr] &="opt1" { ... }...

SCSS Mixins: How to pass in a pseudo class via a variable?


sass,mixins,pseudo-class
I have the following mixin. It only returns code if the global $legacy variable is true. $legacy: true !default; @mixin legacy($element: "body", $legacy: $legacy) { @if $legacy == true { #{$element} { @content; } } } I want to use pass in a pseudo-class for the $element variable. E.g. .ad...

Ampersand not working in :before in SASS


css,sass
I'm building spritesheet buttons, something like this: <a class="Button one"></a> <a class="Button two"></a> With style: a { // Add basic background and styling background: transparent url("images/background_image.png") no-repeat; // Add icon on top &:before { content: ''; display: block; //.... background: transparent url("images/icons.png") no-repeat; // (1) &.one { @include tile(165px, 0,...

Elixir not creating multiple css files


css,laravel,sass,laravel-elixir
Tried to find an awnser to this question but could not find it here? I'm using Laravel Elixir and got the following in my gulpfile: mix.sass(['app.scss', 'admin.scss'], 'public/css'); Can someone tell me why it is not creating two css files but compiles it into one? How can I achieve it...

Set variable value based on screen size [duplicate]


css,css3,sass
This question already has an answer here: Using Sass Variables with CSS3 Media Queries 3 answers I'm using sass. I want to add button paddings depending on the screen size. My only requirement is to have button padding: 8px 8px; for small screens and button padding: 5px 8px; for...

Java MySQL and JFrame connection “Cannot convert from boolean to connection”


java,android,mysql,swing,import
public class BancoDeDados { static String url = "jdbc:mysql://localhost:3306/Estoque"; static String pass = "admin"; static String user = "admin"; static Connection conexao = null; public static boolean conecta() throws ClassNotFoundException { try { Class.forName("mysql.Driver"); conexao = DriverManager.getConnection(url, user, pass); //System.out.println("Conectado."); JOptionPane.showMessageDialog(null, "Conectado com Sucesso!"); return true; } catch (SQLException e)...

Automatically import REST APIs from GitHub / via API into API Manager?


import,automation,swagger,bluemix,swagger-2.0
Does the API Manager / Bluemix provide an interface (API, hook) to automatically update API definitions when I push Swagger 2.0 API definition changes to a GitHub repository?

How to write .class1 > class2 {} in SASS?


css3,sass
How can I write this code in SASS in different ways? .class1 > .class2 {...} which can be applicable for + ~ etc. ...