How can I properly import Sass on my own CSS?

I am learning sass now and I am amazed by its simplicity but I have a problem in compiling or importing.

Because if I try to view my style.css it contains also the styling of the Bootstrap Framework and also the other third party css.

Here's my setup hope you can give me some idea about this.

styles.scss

// Import Bootstrap Compass integration
@import "bootstrap-compass";

// Import custom Bootstrap variables
@import "bootstrap-variables";

// Import Bootstrap for Sass
@import "bootstrap";

// Import Font Awesome
@import "font-awesome-compass";
@import "font-awesome";

// sass breakpoint
@import "../assets/bower_components/breakpoint-sass/stylesheets/_breakpoint.scss";

mystyles.scss

@import 'styles';
@import 'mystyles-mixins';
@import 'mystyles-variables';

.... my styles below

As you can see the style.scss is for importing only. Can you help me with this? The output is fine but I don't like what I see on the page source because it looks like my css is owned by bootstrap :-)

I am using Compass with sass

Solution

I remove third party comments when I compile my SCSS/SASS and add my own banner (comments). You can see on bootstrap's CSS file they added /*! */ at the top comment. Meaning when you compile it will keep that comment. You can read more about this on the documents.

So if you remove all the third party forced comments eg. /*! Comment */ and add your own to your first import it should look much cleaner.