I find it's generally easier to track down CSS selectors by disabling CSS aggregation and then using your browser's inspector feature. This will give you a file and line number to reference for tracking down the selector in question. Often times, you may be able to simply copy-and-paste the selector in question into your subtheme and edit it as needed.
You'll always want to make your CSS and template changes in the subtheme; don't touch the base theme just like you wouldn't touch Drupal core to make code changes. This ensures that if there is an update to the base theme, you can apply it without losing all of your customizations.
Many base themes already have a CSS file structure or directory in place to help you figure out where to put your selectors. If not, the architecture is very much up to your personal preferences. You could put everything in one file if there are only a couple of changes, but most people use some sort of systematic CSS architecture, such as SMACSS, to keep things organized on more complex projects. Alternately, it might make sense to you to mirror the file structure already found in the base theme. You normally don't need to copy all the CSS files from the base theme, just create files to hold any new or customized selectors as needed.
If you haven't yet, check your base theme for a README file, or look at their online documentation for more hints on properly customizing it using a subtheme.
Follow-up, more specific to SASS and Foundation theme:
If you're looking for the SASS file that a selector comes from, the easiest way to trace that down is by enabling SASS source map generation in the subtheme's
sourceMap: true, to the
sass options in
grunt.initConfig() similar to this:
includePaths: ['<%= global_vars.theme_scss %>', '<%= global_vars.base_theme_path %>/scss/'].concat(bourbon)
You may also need to enable loading of CSS source maps in your browser's settings (See the "Enabling source maps in the browser" section from http://thesassway.com/intermediate/using-source-maps-with-sass.
Using source maps to trace back to the specific selector from your OP, it seems to be located in
path/to/themes/zurb_foundation/scss/foundation/components/_top-bar.scss. Looking at the base theme's SASS, you can see it utilizes variables for determining the
padding: 0 $topbar-link-padding;
And those variables are defined elsewhere in the base theme (do a text search to find them) with the
$topbar-height: rem-calc(45) !default;
$topbar-link-padding: ($topbar-height / 3) !default;
This means they can be set to something else in your subtheme's SASS before they are used in the base theme's SASS in order to override the base theme's defaults. I can't tell from the OP, but I'm guessing changing the value for $topbar-height might accomplish both changes you are attempting to make. Doing things in this way (overriding !default variables from the base theme) is less likely to cause alignment issues elsewhere in the theme, so it's generally the preferred methodology (assuming the theme is doing a good job of utilizing SASS, which seems to be the case for the ZURB Foundation base theme)
In order to do this in your subtheme, I'd recommend either adding the variable overrides to your subtheme's
scss/base/_init.scss file, or creating a new
scss/base/_overrides.scss file and editing the main theme SASS file at
@import "base/overrides" it just below the existing
For example, try adding this to the bottom of the subtheme's
scss/base/_init.scss file to double the top bar's height: